บทเรียน figma · beginner · 20 นาที

ตั้งค่าไทโปกราฟีไทยใน Figma

โดย Narongsak Chaiwong

Typography & Licensing Specialist, ThaiGraph · 16 เมษายน 2569

ตรวจสอบข้อมูลเมื่อ April 2026

สิ่งที่คุณจะได้

ไฟล์ Figma ที่คอนฟิกพร้อมสำหรับงาน UI ไทยจริง: โหลดฟอนต์ไทยแบบ self-hosted, กำหนด text styles 5 แบบ (Display, Heading, Body, Caption, Label) ด้วย line-height 1.55+ ที่ถูกต้อง, fallback ฟอนต์สองภาษาสำหรับข้อความไทย-ลาตินผสม และ Figma Variables tokens สำหรับสลับตามภาษา การตั้งค่าใช้เวลา 20 นาทีและเป็นรากฐานของทุกโปรเจกต์ออกแบบผลิตภัณฑ์ไทย — ข้ามขั้นตอนนี้แล้วทีมจะเสียเวลาหลายเดือนแก้ line-height ที่ยุบและวรรณยุกต์ที่แตก

สิ่งที่ต้องเตรียม

• ซอฟต์แวร์: Figma Desktop 2026 browser Figma ใช้ได้แต่การจัดการฟอนต์จำกัด
• ฟอนต์ (ติดตั้งที่เครื่องก่อนด้วย Font Book / Windows Fonts Settings): Sarabun, Kanit, IBM Plex Thai, Noto Sans Thai ทั้งหมดอยู่ภายใต้ SIL license
• Figma Organization หรือ Pro plan สำหรับ shared libraries (optional แต่แนะนำสำหรับทีม)
• เวลา: 20 นาที
• บริบททางวัฒนธรรม: UI ไทยในปี 2026 default เป็นฟอนต์ไม่มีหัวหรือกึ่งไม่มีหัว ฟอนต์มีหัว (Angsana, Cordia) บ่งบอกถึงงานยุคราชการหรือซอฟต์แวร์เก่าต่อผู้ใช้ไทย — ยอมรับได้สำหรับผลิตภัณฑ์ราชการ ผิดสำหรับผลิตภัณฑ์ผู้บริโภค

Step 1: ติดตั้งฟอนต์ไทยที่เครื่องและตรวจใน Figma

ติดตั้งทั้ง 4 ฟอนต์ที่ระดับ OS ก่อน macOS: Font Book > File > Add Fonts Windows: right-click ไฟล์ฟอนต์ > Install รีสตาร์ต Figma Desktop — browser Figma ก็อ่าน OS fonts ได้ แต่ desktop เชื่อถือได้กว่า เปิดไฟล์ใหม่และสร้าง text frame (T) พิมพ์ข้อความทดสอบภาษาไทย: สวัสดีครับ ThaiGraph 2026 เปิด font picker ในพาเนลขวา พิมพ์ Sarabun — ถ้าฟอนต์ปรากฏและเรนเดอร์ภาษาไทยถูกต้องพร้อมตำแหน่งวรรณยุกต์ที่ถูก การตั้งค่าดีแล้ว ถ้าภาษาไทยเรนเดอร์เป็นกล่อง (tofu) รีสตาร์ต Figma และตรวจว่าฟอนต์ถูกติดตั้งที่ OS ไม่ใช่แค่อยู่ใน cloud font list ของ Figma

Step 2: สร้างระบบ typography 5 styles

ใน Figma เปิด Assets panel > Text Styles (หรือ ⌘/Ctrl+K เพื่อค้นหา) กำหนด text styles 5 แบบตามสเปกนี้ — ค่าของไทย ไม่ใช่ค่า default ของลาติน:

• Display / Thai — Kanit Bold, 48 px, line-height 72 px (1.5), letter-spacing 0
• Heading / Thai — Kanit SemiBold, 28 px, line-height 44 px (1.57), letter-spacing 0
• Body / Thai — Sarabun Regular, 16 px, line-height 26 px (1.625), letter-spacing 0
• Caption / Thai — Sarabun Regular, 13 px, line-height 22 px (1.69), letter-spacing 0
• Label / Thai — Sarabun SemiBold, 12 px, line-height 20 px (1.67), letter-spacing 0.5

สำหรับแต่ละ style คลิก + ข้าง Text Styles ในพาเนลขวา ตั้งชื่อตามข้างต้น save กฎ line-height 1.55+ ใช้เพราะวรรณยุกต์ไทยต้องการที่ว่างแนวตั้ง — ดูคำอธิบายเต็มที่ Google Fonts Thai Typography Primer

Step 3: Duplicate สำหรับลาตินพร้อม line-height ที่แคบกว่า

Line-height ไทยสูงเกินไปทางสายตาสำหรับเนื้อหาภาษาลาตินล้วน สร้าง styles คู่ขนานสำหรับลาตินด้วย leading ที่แคบลง คลิกขวาแต่ละ Thai style > Duplicate Style เปลี่ยนชื่อเป็น Display / Latin, Heading / Latin ฯลฯ เปลี่ยนค่าแต่ละตัว:

• Display / Latin — Kanit Bold 48/56 (1.17)
• Heading / Latin — Kanit SemiBold 28/36 (1.29)
• Body / Latin — Inter Regular 16/24 (1.5)
• Caption / Latin — Inter Regular 13/18 (1.38)
• Label / Latin — Inter SemiBold 12/16 (1.33)

ถ้าผลิตภัณฑ์เป็นไทยอย่างเดียว ข้ามขั้นนี้ ถ้าสองภาษา ต้องมีทั้งสองชุด จับคู่ Sarabun กับ Inter สำหรับ body ลาติน — x-heights จับคู่กันได้ดี (Sarabun 500, Inter 510 ที่ 1000 em)

Step 4: สร้าง language Variables (modes)

Figma Variables พร้อม modes คือ pattern ปี 2024+ สำหรับ typography tokens ต่อภาษา เปิด Local Variables (พาเนลขวา) > + Create Variable สร้าง Collection ชื่อ Typography เพิ่มสอง modes: Thai และ Latin สร้าง Variables: font-family-body, font-family-heading, line-height-body, line-height-heading สำหรับแต่ละตัวแปร กำหนดค่าต่างกันต่อ mode — Thai mode ใช้ Sarabun และ 1.625; Latin mode ใช้ Inter และ 1.5 Bind variables เหล่านี้กับ text styles ผ่านปุ่ม Apply Variable บน setting ของ style แต่ละอัน ตอนนี้ style เดียวปรับตัวตามบริบทภาษาโดยอัตโนมัติเมื่อ frame ถูกสลับเป็น Thai หรือ Latin mode

Step 5: ตั้งค่า character fallback สองภาษา

ข้อความไทย-ลาตินผสม (ชื่อแบรนด์ภายในเนื้อหาไทย) ต้องการ fallback chain ของ font-family Figma ไม่รองรับ fallback chain แบบ CSS โดยกำเนิด แต่เคารพ Unicode ranges เมื่อนักออกแบบใส่อักขระแบบผสมสคริปต์ แนวปฏิบัติที่ดี: ใช้ font family ที่ครอบคลุมทั้งสองสคริปต์โดยธรรมชาติ Sarabun, Kanit, Noto Sans Thai และ IBM Plex Thai ทั้งหมดมีตัวอักษรลาตินอยู่แล้ว สำหรับการเรนเดอร์สองภาษาที่สม่ำเสมอ ใช้ Sarabun สำหรับ body (ไทย + ลาติน) แทนการจับคู่ Sarabun/Inter — การจับคู่จะสำคัญเฉพาะเมื่อ brief ต้องการความรู้สึกแบบยุโรปเฉพาะ

Step 6: สร้าง component library ที่รู้จักภาษาไทย

สร้างไฟล์ใหม่ชื่อ ThaiGraph Design System / Typography เผยแพร่ text styles ไทย 5 แบบและลาติน 5 แบบเป็น shared library (Assets > Publish Library) ไฟล์ผลิตภัณฑ์ทุกไฟล์ในองค์กรสมัครใช้ library นี้ผ่าน Assets > Libraries เพิ่ม cover page ที่มี specimen แสดง styles ทั้ง 10 เคียงกัน ตัวอย่างข้อความไทยและลาตินในแต่ละ style และหมายเหตุเรื่องกฎ 1.55+ specimen คือเอกสาร; ป้องกันข้อผิดพลาดที่พบบ่อยของนักออกแบบที่ใช้ Latin Heading style กับเนื้อหาไทยและทำให้ line-height ยุบ

Step 7: ทดสอบกับเนื้อหาไทยจริง

เปิดหน้าผลิตภัณฑ์ วางเนื้อหาไทยจริง — คำอธิบายผลิตภัณฑ์ ป้ายปุ่ม ข้อความผิดพลาดในประโยคเต็ม ระวัง failure modes เฉพาะสี่แบบ: (1) วรรณยุกต์ที่ชนกับบรรทัดบน, (2) คำที่มีตัวห้อยหนักอย่าง ปู หรือ ญาติ ที่ชนบรรทัดล่าง, (3) การผสมสองภาษาที่คำภาษาอังกฤษแทรกทำให้ baseline ไทยแตก, (4) ป้ายปุ่มที่ข้อความไทยยาวกว่าอังกฤษ 30-50% แล้วล้นปุ่ม ปรับ Variables หรือ components ตามต้องการ ส่งงานด้วยความมั่นใจว่าฝั่งไทยของผลิตภัณฑ์เสมอฝั่งลาตินในด้านคุณภาพงานออกแบบ

ข้อควรรู้ทางวัฒนธรรม

การเลือกฟอนต์ UI ไทยเป็นสัญญาณเงียบต่อผู้ชม ฟอนต์ไม่มีหัวแบบ sans (Sarabun, Kanit, IBM Plex Thai) อ่านว่าโมเดิร์นและเป็นสตาร์ตอัปต่อผู้ใช้ไทย; ฟอนต์มีหัวแบบ serif (Angsana, Cordia) อ่านว่าราชการ องค์กรเก่า หรือ retro โดยตั้งใจ มาตรฐาน UX/UI ของสำนักงานพัฒนารัฐบาลดิจิทัล (DGA, 2023) ระบุ Sarabun เป็น default สำหรับบริการภาครัฐที่มุ่งผู้บริโภค — sans มีหัวที่สะอาดคือจุดประนีประนอมระหว่างความสามารถในการอ่านแบบประเพณีกับความสะอาดสมัยใหม่ สำหรับผลิตภัณฑ์ผู้บริโภคนอกภาครัฐในปี 2026 ไม่มีหัวคือตัวเลือกหลัก; IBM Plex Thai เป็นที่โปรดปรานสำหรับ fintech และ SaaS, Kanit สำหรับ consumer apps, Sarabun สำหรับบริบทผสม บริบทเดียวที่ Angsana และ Cordia ยังเหมาะสมคือเอกสารสัญญา กฎหมาย และวิชาการซึ่งความคาดหวังของผู้อ่านอนุรักษ์นิยม

ข้อผิดพลาดที่พบบ่อย

• Line-height ที่ 1.2 หรือ 1.4 default ลาตินทำให้วรรณยุกต์ชนตัวห้อย ต้อง 1.55+ สำหรับ body ไทยเสมอ
• ใช้ฟอนต์ไทยจาก cloud ของ Figma โดยไม่ติดตั้งที่เครื่อง ทำให้การเรนเดอร์ไม่สม่ำเสมอระหว่างจอนักออกแบบกับการ implement ของ developer
• ใส่ letter-spacing กับเนื้อหาไทย tracking บวกทำลายการเชื่อมสระ-พยัญชนะ
• text style เดียวสำหรับไทยและลาตินโดยไม่มี variables ล็อกให้คุณประนีประนอม line-height ที่ผิดสำหรับฝั่งหนึ่ง
• ไม่ทดสอบกับเนื้อหาจริง Lorem ipsum ไม่มีวรรณยุกต์ ทดสอบด้วยข้อความแบบ ยฎฯ์ญึื ที่มีความหนาแนวตั้งเสมอ

ไฟล์และขั้นตอนถัดไป

ดาวน์โหลด ThaiGraph Figma Thai Typography starter library ได้จาก ไดเรกทอรีฟอนต์ — ไฟล์ share ที่ library link ในแต่ละหน้าฟอนต์ ฟอนต์สำคัญ: Sarabun, Kanit, IBM Plex Thai, Noto Sans Thai สำหรับกฎ typography สองภาษาที่กว้างขึ้น ดู คู่มือไทโปกราฟีสองภาษา ไทย+ลาติน และ pillar คู่มือครบถ้วนเรื่องไทโปกราฟีไทย บทความ Figma ถัดไป: สร้าง Thai Design System ใน Figma

ตรวจสอบข้อมูลเมื่อ April 2026