Cách tư duy chọn font, size chữ và tạo text styles bằng figma | kaorumap

Cách tư duy để chọn font, size chữ và dùng figma để tạo text style trong thiết kế sản phẩm kỹ thuật số.
Một số link website được đề cập đến trong bài giảng:
type-scale.com/
material.io/design/typography...
spencermortensen.com/articles...
Bài giảng có tham khảo một số kiến thức từ:
- 101 UX Principles by Will Grant (book)
- Introduction to Design Systems with Figma by Javier 'Simón' Cuello (Domestika course)
-------------------------------------------------------------------------------------------
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 .
------------------------------------------------------------------
#graphicdesign #indesign #tutorial
© Copyright by kaorumap ☞ Do not Re-up

[@joselynluc]

Video dễ hiểu, ko gây buồn ngủ, ko lan man, vô thẳng vấn đề. Cảm ơn chị đã chia sẻ ạ.

[@sinsinr478]

E sẽ ủng hộ video của chị mỗi ngàyyyy, yêu chị, ủng hộ những web kiến thức chuyên môn như chuỵ

[@maihuynh3140]

Các videos về thiết kế của chị hay quá ạ, không chỉ figma mà videos về tư duy thiết kế cũng hay nữa ạ, ngắn gọn, dễ hiểu, đúng trọng tâm, có mấy kênh cũng dạy các môn này bằng tiếng việt mà em chưa thấy kênh nào dạy có tâm và dễ hiểu như chị luôn á. Hy vọng sắp tới chị sẽ ra thêm nhiều videos nữa nha. Em cám ơn chị nhiều lắm ạ

[@kaorumap]

Cảm ơn em rất nhiều! ♥️

[@thanglong617]

Chất lượng thật sự cảm ơn cô nhiều ạ !!!!

[@thuthuytran195]

Uii giọng c hay dã man ạ , kiểu nghe hoài k bị chán í ạ. Mong c ra nhiều video như này hơn ạ , e cảm ơn chị ạ

[@hoanglinhphuong1180]

Cô giảng hay và dễ hiểu quá ạ. Rất hợp với mấy đứa tự học như em. Thank cô ♥

[@BaddieBadass]

Em thích nghe chị hướng dẫn nhất, dễ hiểu

[@TaiTran-ms5bk]

quá trời tuyệt vời, trong khi mình đang hoang mang cách tạo text styles thì xuất hiện video này của bạn. Cám ơn kiến thức và chia sẻ của bạn. Chúc bạn nhiều thành công và nhiều sức khỏe nhé!

[@thaomynguyennguyen4144]

video chất lượng quá! Cảm ơn bạn đã chia sẻ!

[@anhdaothivan5649]

Cô giảng rất hay và cực kỳ dễ hiểu. Em không biết gì về mảng này nhưng vô tình xem được video của cô mà mê luôn

[@quangkhuedinhdo]

Mình cũng có hướng dẫn một lớp nhỏ về UI Design và thấy video này của chị rất dễ hiểu, rõ ràng và ngắn gọn. Mình sẽ recommend kênh của chị cho các bạn học viên. Cảm ơn chị.

[@MinhLe1999pro]

thích bài nhạc nền quá, thiết kế của cô rất đẹp. Em cảm ơn Cô

[@cuongbq92]

Cám ơn chị rất nhiều, video về quy trình rất hữu ích ạ

[@adscafe1237]

Cảm ơn bạn, cảm ơn bạn rất nhiều vì những video khá hữu ích mang tới cộng đồng.

[@BichNgoc-pi8hx]

em cảm ơn cô, bài giảng của cô rất dễ hiểu, dễ ứng dụng, thuận tiện cho quá trình design. Thật sự rất hữu ích. Em học được cách tư duy rất nhiều qua bài giảng của cô. Mong cô nhiều sức khoẻ và niềm vui ạ

Một trong những điều tốt đẹp nhất trong những ngày tháng dịch này là em tìm thấy channel của chị, các videos của chị hướng dẫn rất dễ hiểu và phù hợp cho cả những người bắt đầu. Cảm ơn chị rất nhiều và hy vọng chị sẽ tiếp tục xây dựng nhiều videos chất lượng nữa ạ.

[@kaorumap]

Cảm ơn em đã động viên chị nhé!

[@songtuyen9484]

Rất hay, cảm ơn chị.

[@vuongqtvn]

cảm ơn cô nhiều video cực kỳ hữu ích ạ

[@quangnhatlamtran1624]

mong cô ra nhiều video figma mới em ghiền series đó quá

[@trinhnguyen3555]

Thực sự cảm ơn chị, những bài giảng hay và tâm huyết như vậy sẽ giúp ngành design của đất nước càng ngày càng phát triển hơn

[@kaorumap]

Cảm ơn em nhé ♥️

[@uxuidesigner1048]

[@datdoubled4454]

❤ Giọng cute phomaique sicola bạc xỉu lun

[@thosandat]

cảm ơn bạn đã chia sẻ

[@tranthien1002]

Thực sự rất cảm ơn chị vì những videos tâm huyết, nội dung ngắn gọn đúng trọng tâm và vô cùng dễ hiểu ạ. Em thấy rất may mắn và biết ơn khi tìm và xem được các videos của chị. Em chúc chị nhiều sức khoẻ, mong kênh sẽ ngày càng phát triển và chị tiếp tục ra thêm các videos hướng dẫn hay như này nữa ạ.

[@kaorumap]

Cảm ơn em nhé ♥️

[@nguyenthuylinh124]

Hiii em cám ơn cô! Thích bài giảng của cô lắm luôn ạ

[@kaorumap]

Cô cảm ơn em!

[@thanhcul2861]

Cá nhân mình học được rất nhiều từ những videos của bạn! Mình rất cảm ơn và chia sẽ để nhiều người biết đến. Thích nhất cách bạn vừa tutorial mà lại đưa vào áp dụng trong công việc - rất hữu ít cho những newbie như mình khi chưa có cơ hội làm việc thực tiễn. Cảm ơn bạn, chúc bạn thành công!

[@kaorumap]

Cảm ơn bạn nhiều lắm, những comment như thế này là động lực để mình tiếp tục chia sẻ ♥️

[@myphung_11]

Hóng video tiếp theo ùng hộ bạn.

[@kaorumap]

Cảm ơn bạn!

[@tammarc89]

bài giảng rất chi tiết và dễ hiểu ạ ,có điều em chưa rõ chị set lineheight của Font theo quy tắc nào cho chuẩn với gird ạ

[@maihuongnguyenvu6894]

Em cảm ơn cô đã ra những video hữu ích ạ! Mùa dịch này em bắt đầu học figma và may mắn tìm được chuỗi bài giảng này. Đối với newbie như em chưa có xíu kinh nghiệm nào thì những điều này rất bổ ích luôn. Hy vọng thời gian tới cô sẽ tiếp tục ra nhiều video tư duy như này ạ

[@kaorumap]

Cảm ơn em nhiều ♥️

[@vobinhthu7000]

Video này vô cùng cần thiết luôn á cô, em sẽ tiếp tục theo dõi, hi vọng cô có thể làm thêm nhiều video về lí thuyết thiết kế web như vầy ạ. Chúc cô nhiều sức khoẻ và thành công ạ 🥰

[@kaorumap]

Cảm ơn em nhé!

[@nguyenthuanhoa11-76]

Mình đang luôn share bài của chị cho những thành viên trong nhóm Startup của mình xem và học tập theo do mình là người đầu tiên học ở Channel này. Rất hữu ích! Mong bạn hãy tiếp tục cố gắng

[@kaorumap]

Cảm ơn bạn rất nhiều, kênh này mình làm 1 mình nên nhiều khi cũng khá mệt, nhờ những comment động viên như thế này mình có động lực soạn bài để truyền đạt được kiến thức đến nhiều người hơn nữa!

[@myhanh141190]

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

[@huyngo5779]

Video cô làm rất bổ ích ạ

[@kaorumap]

Cảm ơn em!

[@locphan5478]

Video hay quá chị ơi, ngắn gọn dễ hiểu ạ. Nếu chị mở workshop về tư duy thiết kế như vầy em tham gia liền luôn :)). Mong chị sẽ làm thêm nhiều video tư duy như vậy. Cảm ơn chị rất nhiều.

[@kaorumap]

Cám ơn em, có thời gian rảnh chị sẽ làm thêm tiếp!

[@tiendatdev]

cảm ơn bạn rất nhiều

[@quynhanhmai6148]

thật sự rất bổ ích

[@led1549]

cảm ơn chị

[@PhanTanThangTH]

Em cảm ơn chị rất nhiều ạ :)

[@tamtamngo6533]

Major Third: dùng cho loại nhiều thông tin, card, size chữ ko quá chênh lệch Perfect Fourth: dùng cho blog, landing page, có nhiều spacing

[@nghiaphuc6658]

Best channel for biginners ❤

[@kaorumap]

Cảm ơn bạn!

[@reifrackeri5262]

Kênh hữu ích, nội dung hay, súc tích ghê, ủng hộ cô làm thêm về series này ạ. Em cảm ơn nhiều

[@kaorumap]

Cảm ơn em nhé!

[@reifrackeri5262]

@@kaorumap cô ơi, cô có thể làm thêm 1 clip về các prototype còn lại trong figma, nâng cao càng tốt ạ. Cô ví dụ từ các project có sẵn về website + mobile để dễ hình dung, phù hợp cho từng tình huống được k ạ. Clip prototype cơ bản cô giải thích rất dễ hiểu ạ. Em cảm ơn cô !

[@kaorumap]

@@reifrackeri5262 Chào em, cô sẽ cố gắng bổ sung cho playlist figma. Nhưng hiện tại do cô đang hướng dẫn tốt nghiệp cho 1 số bạn sinh viên Đồ hoạ nên cô phải dành thời gian soạn và làm các video về tư duy thiết kế cho các bạn học trước. Em thông cảm nhé.

[@huynguyennhuquoc1359]

thích cách giảng của chị ngay từ bài đầu tiên, rất hữu ích trong việc làm project cuối kì của môn học,cảm ơn chị rất nhiều

[@kaorumap]

Cảm ơn em nhé!

[@nguyenduybaonguyen918]

Figma master Huynnq

[@huynguyennhuquoc1359]

@@nguyenduybaonguyen918 nhường Nguyên :)

[@HoaiNam9117]

Em cám ơn chị

[@kaorumap]

Cảm ơn em đã xem nhé!

[@nghiaphuc6658]

Chị ơi mong có 1 video nói về tracking, leading ở font giữa các Font lớn :(

[@linhnguyen-tk4vz]

hóng video của chị

[@kaorumap]

cảm ơn em

[@MinhVu-dw2tn]

Chị có thể làm vid nói rõ về grid và spacing được không ạ

[@khachu6793]

Giọng của chị như nàng thơ vậy :(( nghe cuốn hơn cần

[@hoangtien6524]

Cô ơi cô còn ra tiếp video dạy figma nữa không ạ? E đang học kì 2 về web đợt này dịch nên học online nên lên youtube xem thêm video thì thấy video cô dạy ngắn gọn và dễ hiểu quá, em xem cả video về màu của cô nữa, học được nhiều lắm cô! Mong cô ra tiếp video về figma ạ.

[@kaorumap]

Cảm ơn em. Cô sẽ ra tiếp figma nha em!

[@hoangtien6524]

@@kaorumap vâng ạ, e cảm ơn cô nha! ^^

[@loithiloan5814]

Cảm ơn cô rất nhiều, cô có video về dạy cách làm video trên After Effects ko ạ?

[@kaorumap]

Mình không có dùng after effect trong công việc nên không có đủ trình độ dạy phần này, video dạy của mình thì mình làm bằng premiere pro thôi bạn

[@diywithlinhh]

Hay quá chị ơi, lần sau chị có thể làm hướng dẫn lúc thiết kế trên fug ma thì nên bắt đầu từ đâu không chị, nhiều lúc làm xong lại phải xóa đi làm lại vì qua trang mới nó không còn phù hợp huhu :(

[@kaorumap]

chị đã hướng dẫn cách tạo file mới ở video này rồi em nhé kzbin.info/www/bejne/nGK5ioyges2LaLM

[@huynhnguyen7533]

Bổ ích quá cô ơi! Muốn học lại môn web quá 🤣

[@kaorumap]

Trời, hôm bữa 9 điểm rồi học lại 10 điểm sao 😹😹😹

[@huynhnguyen7533]

@@kaorumap Học được nhiều thứ nên thích lắm cô. Cô làm tutorial ngắn gọn mà tận tình đúng trọng tâm nữa, em học được cả Indesign với Figma là từ xem mấy clip của cô hết. Không thôi là em tự mò cũng chật vật lắm 😁

[@kaorumap]

Trời, đọc được comment như vầy cô mừng lắm đó, cô cứ sợ cô làm xong không ai coi tại cô soạn bài cũng vật vã lắm, thu đi thu lại cắt tới cắt lui để giữ cho video không dài mà vẫn đầy đủ nội dung 😅

[@huynhnguyen7533]

@@kaorumap Dạ em nghĩ do chưa nhiều người biết đến thôi chứ tutorial cô làm rất cần thiết luôn. Cô k cần sợ vì có tụi em coi hết 😂 Em chúc cô thành công và những video này sẽ đến được với nhiều người hơn nữa❤️

[@kaorumap]

@@huynhnguyen7533 cô cũng có xem một số video dạy thiết kế của VN mà cô thấy hơi dài dòng khó hiểu nên cô rút kinh nghiệm 😂

[@lehang4057]

Hi chị, cho e hỏi, e đã tạo đc 1 text style, và tạo thêm 1 text style với font khác. ở trang project vẫn có 2 text style e mới tạo, nhưng qua project khác thì chỉ mở được 1 text style đã tạo trước đó thôi ạ. Vậy phải làm thế nào để mình update các thay đổi đó, cho toàn bộ các project ạ.

[@thole8512]

like like

Chỉ cách chọn màu sao cho đẹp dc không cô ơi! em cảm ơn

[@kaorumap]

Mình đang làm ở playlist về màu sắc nhé bạn, mình vẫn đang làm tiếp playlist đó.

[@minhngocnguyen9767]

Cô ơi cô xài bàn phím zì zj cô. Tiếng bàn phím của cô nghe tuyệt vời quá.

[@kaorumap]

cô xài bàn phím ergodox ergodox-ez.com/ nhưng có đổi switch và keycap khác, hiện tại bàn phím của cô nhìn như vầy facebook.com/nguyenngocthaonguyen/posts/10159670842660409

[@namnguyenvan3490]

Video khá hay ạ. Em muốn hỏi về công thức tính "line height text" chị có thể trả lời giúp em được không ạ?

[@kaorumap]

về line height em có thể đọc thêm ở google material design guidelines ở đây nhé material.io/design/typography/understanding-typography.html#readability mình cũng có giải thích và đề cập đến line height và baseline grid ở phút 3:27 trong video này kzbin.info/www/bejne/p4DSlIqYqtiCnrc

[@namnguyenvan3490]

@@kaorumap Cảm ơn add ạ

[@tandile2601]

Cái thông số Line height trong bảng text style mình luôn mặc định để auto lun hả chị

[@kaorumap]

Auto là phần mềm để sẵn, em có thể để auto tiếp hoặc chỉnh thành số khác tùy thiết kế của em

[@minhtuan4643]

cô ơi cô dùng phím tắt gì để nhân bản một text ra mà nó đều nhau như trong video vậy cô.?

[@kaorumap]

Em giữ Alt (Pc) hoặc Option (Mac) khi click và drag để duplicate bất cứ thứ gì nha, sáng mai chị sẽ up 1 video mới nói kỹ về 1 số thao tác và phím tắt trên figma

[@minhtuan4643]

@@kaorumap cảm ơn cô ạ 😍

[@molikaq9005]

bạn có mở lớp dạy ko?

[@kaorumap]

Mình đang dạy ở trường đại học, không có mở lớp riêng

[@thole8512]

Tiếp chọn màu luôn cô ơi.

[@kaorumap]

Kiên nhẫn chờ cô nha em, cô bận và làm biếng lắm chứ cô không phải youtuber toàn thời gian 😹😹😹

[@thole8512]

@@kaorumap tầm 1 tuần là một bài là quá ngon luôn :)))

[@tramdiep8093]

@kaorumap dạ cô ơi có bài giảng về chọn màu ko ạ ? 😊

[@5phutgiaitri366]

Em là newbie nên có vài cái chưa phân biệt được Em chỉ hay gặp nhất là heading và body. Còn subtitle, label, caption là gì? Dùng khi nào cô có thể giải thích và chỉ em cách dùng sao cho hợp lý nhất không ạ?

[@kaorumap]

Em có thể đọc thêm ở đây để hiểu hơn nhé material.io/design/typography/the-type-system.html#applying-the-type-scale Subtitle thường là vài câu giới thiệu ngắn nằm giữa heading và body

[@kaorumap]

Label thì là cái tên, ví dụ news feed trong facebook thì phần nội dung được post là body nhưng tên user post nội dung đó thì là label em

[@5phutgiaitri366]

@@kaorumap dạ vâng cám ơn chị rất nhiều ❤

[@duynguyen-qj2hc]

nếu ở web scale-type đó không có font mình cần thì phải làm sao ạ

[@kaorumap]

web đó chỉ dùng để tham khảo về tỉ lệ chữ, font gì không quan trọng nhé bạn

[@quangduy6575]

Sau khi tạo một dự án mới thì nó bị mất , có cách nào để nó lưu vĩnh viễn k ạ.

[@kaorumap]

Khi bạn tạo dự án mới thì file cũ vẫn ở đó, chỉ cần giữ link figma là mở lại được. Nếu bạn muốn lưu thành file hẳn hoi thì có thể bấm vào icon figma ở góc trên bên trái (bên cạnh Move tool) rồi chọn File / Save local copy thì nó sẽ tạo thành file .fig cho bạn lưu về máy.

[@alexaug9268]

chị cho em hỏi làm sao để giãn chữ trong figma ạ? em không tìm được trong công cụ để giãn chữ ạ, mong c reply em cám ơn ạ

[@kaorumap]

Khi em chọn Type Tool trong figma thì nhìn qua panel Design ở bên phải sẽ thấy khu vực chỉnh thông số của Text như thế này ibb.co/bRj9wy6 chỗ chữ |A| 0% em chỉnh tăng số % lên thì khoảng cách giữa các ký tự trong text sẽ giãn ra

[@thanglong617]

cô ơi cho em xin cái nhạc nên với ạ! coi hết chuỗi Figma này em nghiền bài nhạc nền quá cô ơi ^_^

[@kaorumap]

ở cuối clip mình có để credit bài nhạc đó bạn, đây là nhạc trong thư viện nhạc của KZbin, bạn có thể nghe ở đây kzbin.info/www/bejne/pJzceX-Ad85_bLs

[@thanglong617]

@@kaorumap dạ e cảm ơn

[@anhhnguyet_9763]

làm sao để chỉnh cho chữ nó cong v chị ơi :< e mò hoài mà kh ra

[@kaorumap]

chữ cong (curved text) thì em phải dùng Plugin nhé, ví dụ như cái này www.figma.com/community/plugin/762070688792833472/arc

[@anhhnguyet_9763]

@@kaorumap dạ e làm dc rồi ạ, tks chịii

[@NamNguyenVinh]

Mình khi đặt tên để luôn số Text size trên đầu, lúc lựa text các bạn khác thấy dc cả số size, điều này giúp giảm cognitive load cho nhiều editor dùng chung rất nhiều ; )

[@kaorumap]

Đúng rồi bạn, video này mình hướng dẫn tổng quát cho sinh viên của mình thôi, cuối video mình cũng có nói đặt tên sao cho tiện là tùy mỗi người, mỗi team