Home InsightsART & CREATIVE

ART & CREATIVE

หลักการออกแบบกราฟิก 5 ข้อ คืออะไร เขียนเป็น Design Tokens

13 พฤษภาคม 2566

อัปเดตล่าสุด 27 กันยายน 2569

เวลาอ่านประมาณ 11 นาที

หลักการออกแบบกราฟิก 5 ข้อ คืออะไร เขียนเป็น Design Tokens

KEY TAKEAWAYS

3 ประเด็น

หลักการออกแบบกราฟิก 5 ข้อ คือ Balance, Contrast, Alignment, Proximity และ Repetition

สี่ข้อหลังแปลงเป็นค่าที่เขียนไว้ล่วงหน้าได้ เช่น คู่สีที่อนุญาต กริด และระยะห่างมาตรฐาน ส่วน Balance ยังต้องให้คนตัดสินจากงานจริง

Design Tokens Community Group เผยแพร่รูปแบบไฟล์ Design Tokens ฉบับ 2025.10 เมื่อ 28 ตุลาคม 2568 และระบุสถานะว่าเสถียร

ไฟล์ .tokens ชุดเดียวใช้แลกค่าสี ขนาด ฟอนต์ และระยะห่างระหว่างโปรแกรมออกแบบ โค้ด และเครื่องมืออื่นได้ แต่เอกสารนี้ไม่ใช่มาตรฐานของ W3C

ระบบออกแบบของหน่วยงานรัฐสองแห่งกำหนดระยะห่างเป็นขั้นบันได

ระบบของรัฐบาลสหรัฐฯ (USWDS) ใช้ผลคูณของ 8 พิกเซล ระบบของรัฐบาลสหราชอาณาจักร (GOV.UK) ใช้ขั้นละ 5 ถึง 10 พิกเซล ทั้งสองระบบไม่ให้ผู้ออกแบบพิมพ์ตัวเลขระยะห่างเอง

หลักการออกแบบกราฟิก 5 ข้อ Balance Contrast Alignment Proximity Repetition เขียนเป็น Design Tokens ตามไฟล์ DTCG ฉบับ 2025.10 ให้ผู้ออกแบบหลายรายและ AI ใช้กฎชุดเดียว

งานกราฟิกของธุรกิจหนึ่งแบรนด์ในปีเดียวอาจผ่านมือผู้ออกแบบภายใน ฟรีแลนซ์สองสามราย ทีมพัฒนาเว็บ และเครื่องมือ AI ที่สร้างภาพจากคำสั่ง ทุกฝ่ายรู้จักหลักการออกแบบห้าข้อ แต่แต่ละฝ่ายตีความ "ระยะห่างที่พอดี" หรือ "สีที่ตัดกันพอ" ไม่ตรงกัน งานที่ออกมาจึงดูเป็นคนละแบรนด์แม้ใช้โลโก้เดียวกัน

บทนี้อธิบายหลักการห้าข้อแล้วแยกว่าข้อใดเขียนเป็นค่าตายตัวที่เครื่องมือตรวจได้ และข้อใดยังต้องให้คนดู โดยอ้างรูปแบบไฟล์ Design Tokens ฉบับล่าสุดของชุมชนผู้พัฒนาระบบออกแบบ และระบบออกแบบของหน่วยงานรัฐสองแห่งที่เปิดเอกสารให้อ่าน

หลักการออกแบบกราฟิก 5 ข้อ

หลักการห้าข้อนี้เป็นเกณฑ์ตรวจงานพื้นฐานที่ใช้ได้กับโปสเตอร์ สไลด์ หน้าเว็บ และภาพลงโซเชียล แต่ละข้อตอบคำถามต่างกัน

หลักการออกแบบกราฟิก 5 ข้อ มีอะไรบ้าง

หลักการห้าข้อคือ Balance การกระจายน้ำหนักทางสายตาให้งานไม่เอียงไปด้านใด Contrast ความต่างของสี ขนาด หรือน้ำหนักที่ทำให้สิ่งสำคัญเด่น Alignment การวางทุกชิ้นให้ตรงแนวเส้นร่วมกัน Proximity การวางของที่เกี่ยวข้องกันไว้ใกล้กันและแยกของที่ไม่เกี่ยวข้องให้ห่าง และ Repetition การใช้สี ฟอนต์ และรูปแบบเดิมซ้ำทั้งชิ้นงานและทุกชิ้นของแบรนด์ ข้อที่มักถูกละเลยในงานของธุรกิจเล็กคือ Proximity เพราะการเว้นระยะไม่เท่ากันเห็นได้ยากในงานชิ้นเดียว แต่เห็นชัดเมื่อวางหลายชิ้นเทียบกัน

หลักการ	คำถามตรวจงาน	เขียนเป็นค่าล่วงหน้าได้ไหม
Contrast	สิ่งสำคัญที่สุดเด่นกว่าส่วนอื่นหรือไม่	ได้ เป็นคู่สีและขนาดตัวอักษรที่อนุญาต
Alignment	ทุกชิ้นอยู่บนเส้นแนวร่วมกันหรือไม่	ได้ เป็นกริดและจุดเปลี่ยนความกว้างจอ
Proximity	ของที่เกี่ยวข้องกันอยู่ใกล้กันกว่าของที่ไม่เกี่ยวข้องหรือไม่	ได้ เป็นขั้นระยะห่าง
Repetition	สี ฟอนต์ และรูปแบบเดิมถูกใช้ซ้ำหรือไม่	ได้ เป็นค่าอ้างอิงที่ทุกชิ้นดึงไปใช้
Balance	น้ำหนักทางสายตากระจายพอดีหรือไม่	ได้บางส่วน ต้องให้คนดูงานจริง

Design Tokens คืออะไร

Design Tokens คือค่าการออกแบบที่มีชื่อ เช่น สีตัวอักษรหลัก ขนาดหัวข้อระดับหนึ่ง หรือระยะห่างขั้นที่สาม เก็บไว้ในไฟล์กลางที่โปรแกรมออกแบบและโค้ดอ่านได้ทั้งคู่ เมื่อแก้ค่าที่ไฟล์กลาง งานทุกชิ้นที่อ้างชื่อนั้นเปลี่ยนตาม

Design Tokens ต่างจากคู่มือแบรนด์แบบ PDF อย่างไร

คู่มือแบรนด์แบบ PDF บอกค่าให้คนอ่าน แล้วคนต้องพิมพ์ค่านั้นลงในงานเองทุกครั้ง Design Tokens เก็บค่าเดียวกันในรูปแบบที่เครื่องมืออ่านได้โดยตรง ผู้ออกแบบเลือกชื่อค่า เช่น spacing.3 แทนการพิมพ์ 24 พิกเซล ความผิดพลาดจากการพิมพ์ตัวเลขผิดหรือใช้ค่าจากคู่มือฉบับเก่าจึงลดลง คู่มือแบรนด์ยังจำเป็นสำหรับการอธิบายเหตุผลและตัวอย่างการใช้ แต่ค่าตัวเลขควรมีที่เก็บแห่งเดียว เรื่องการทำคู่มือแบรนด์และอัตลักษณ์องค์กรทั้งระบบอยู่ในบท บริการออกแบบอัตลักษณ์องค์กร (Corporate Identity – CI)

รูปแบบไฟล์ Design Tokens ของ DTCG

Design Tokens Format Module 2025.10 เผยแพร่โดย Design Tokens Community Group เมื่อ 28 ตุลาคม 2568 เอกสารระบุว่าเป็นรายงานฉบับสุดท้ายของกลุ่มชุมชนภายใต้ W3C ไม่ใช่มาตรฐานของ W3C และไม่ได้อยู่ในเส้นทางการรับรองเป็นมาตรฐาน แต่ระบุสถานะว่าเสถียรและตั้งใจให้เครื่องมือต่าง ๆ นำไปใช้

สิ่งที่ข้อกำหนดระบุ	รายละเอียด
นามสกุลไฟล์ที่แนะนำ	`.tokens` หรือ `.tokens.json`
ชนิดสื่อ (MIME type)	`application/design-tokens+json` และเครื่องมือต้องรับ `application/json` ได้ด้วย
ชนิดค่าพื้นฐาน	สี ขนาด ชุดฟอนต์ น้ำหนักฟอนต์ ระยะเวลา เส้นโค้งการเคลื่อนไหว และตัวเลข
ชนิดค่าแบบประกอบ	รูปแบบเส้น เส้นขอบ การเปลี่ยนสถานะ เงา การไล่สี และชุดตัวอักษร (typography)
การอ้างค่าอื่น	ค่าหนึ่งอ้างอีกค่าได้ เช่น สีตัวอักษรหลักอ้างสีดำในจานสี

ทำไมรูปแบบไฟล์กลางถึงสำคัญกับงานที่ใช้ AI

เพราะ AI ที่สร้างภาพหรือโค้ดหน้าเว็บทำตามค่าที่ได้รับ ถ้าส่งคำสั่งว่า "ใช้สีแบรนด์" AI ต้องเดาค่า ถ้าส่งไฟล์ Design Tokens ที่มีชื่อและค่าครบ AI และเครื่องมือแปลงโค้ดอ่านค่าเดียวกับที่ผู้ออกแบบใช้ได้ ข้อกำหนดของ DTCG เขียนเป้าหมายไว้ในบทคัดย่อว่าเป็นรูปแบบไฟล์สำหรับแลกค่าการออกแบบระหว่างเครื่องมือต่าง ๆ เมื่อธุรกิจเปลี่ยนผู้รับจ้างหรือเปลี่ยนเครื่องมือ ไฟล์นี้จึงย้ายตามไปได้โดยไม่ต้องแปลงค่าใหม่ทีละตัว

Proximity กับ Alignment ในระบบออกแบบของรัฐ

ระบบออกแบบของหน่วยงานรัฐเปิดเอกสารให้อ่านทั้งหมด จึงเป็นตัวอย่างที่ตรวจสอบได้ว่ากฎเรื่องระยะห่างถูกเขียนเป็นค่าตายตัวอย่างไร ทั้งสองระบบให้ผู้ออกแบบเลือกระยะห่างจากขั้นที่กำหนด ไม่ให้พิมพ์ตัวเลขเอง

ระบบ	ฐานของขั้นระยะห่าง	ตัวอย่างค่า
U.S. Web Design System	ผลคูณของ 8 พิกเซล พร้อมขั้นย่อยสำหรับระยะเล็ก	ขั้น 0.5 = 4px · 1 = 8px · 2 = 16px · 3 = 24px · 4 = 32px · 5 = 40px
GOV.UK Design System	ขั้น 0-9 แบบคงที่ และแบบที่ปรับตามขนาดจอ	ขั้น 1 = 5px · 3 = 15px · 6 = 30px · 9 = 60px (จอใหญ่)

ระบบของ GOV.UK มีสองชุดในเอกสารเดียว ชุดคงที่ใช้ค่าเดิมทุกขนาดจอ ส่วนชุดที่ปรับตามจอใช้ค่าเล็กลงเมื่อจอแคบกว่าจุดเปลี่ยนความกว้าง 640 พิกเซล เช่น ขั้น 6 เป็น 30 พิกเซลบนจอใหญ่และ 20 พิกเซลบนจอเล็ก ขณะที่ขั้น 0 ถึง 3 เท่ากันทุกจอ

ระยะห่างแบบขั้นบันไดช่วยเรื่อง Proximity อย่างไร

ขั้นบันไดทำให้ความต่างของระยะห่างชัดพอที่ผู้ชมรับรู้ได้ Proximity ทำงานเมื่อระยะภายในกลุ่มเล็กกว่าระยะระหว่างกลุ่มอย่างเห็นได้ชัด ถ้าผู้ออกแบบพิมพ์ระยะเองเป็น 14, 16 และ 18 พิกเซล ความต่างเล็กเกินกว่าตาจะแยกกลุ่มได้ เมื่อบังคับให้เลือกจากขั้น 8, 16, 24 และ 32 พิกเซล ระยะภายในกลุ่มกับระยะระหว่างกลุ่มจะห่างกันอย่างน้อยหนึ่งขั้นเสมอ และเครื่องมือตรวจโค้ดหาค่าที่ไม่อยู่ในรายการได้ทันที

Alignment ใช้หลักเดียวกันกับกริดและจุดเปลี่ยนความกว้างจอ ระบบของ USWDS ตั้งชื่อความกว้างเป็นค่าเดียวกับขั้นระยะห่าง เช่น tablet เท่ากับ 640 พิกเซล และ desktop เท่ากับ 1,024 พิกเซล ทุกชิ้นงานจึงเปลี่ยนเลย์เอาต์ที่ความกว้างเดียวกัน

Contrast กับ Repetition เขียนเป็นค่าอ้างอิง

Contrast กับ Repetition แปลงเป็นค่าได้ผ่านการอ้างค่า ชื่อค่าที่บอกหน้าที่ เช่น "สีตัวอักษรบนพื้นมืด" อ้างไปยังสีในจานสีอีกชั้นหนึ่ง

ควรตั้งชื่อค่าสีตามสีหรือตามหน้าที่

ควรมีทั้งสองชั้น ชั้นแรกตั้งชื่อตามสี เช่น palette.indigo หรือ palette.pink เก็บค่าสีจริง ชั้นที่สองตั้งชื่อตามหน้าที่ เช่น text.on-dark หรือ button.primary แล้วอ้างไปยังชั้นแรก ข้อกำหนดของ DTCG เรียกการอ้างแบบนี้ว่า alias การแยกสองชั้นทำให้ Contrast ตรวจได้ที่ชั้นหน้าที่ เพราะรู้ว่าสีไหนวางบนพื้นไหน ส่วน Repetition เกิดเองเพราะทุกปุ่มดึงค่า button.primary ตัวเดียวกัน ถ้าวันหนึ่งแบรนด์เปลี่ยนสีหลัก ผู้ดูแลแก้ที่ชั้นจานสีจุดเดียว

การวัดว่าคู่สีตัดกันพอหรือไม่ใช้สูตรค่า Contrast Ratio ของ WCAG ซึ่งฟิจิ⁠ทัลใช้วัดชุดสีของตัวเองในบท ทฤษฎีสี (Color Theory) และจิตวิทยาสี บนป้ายร้านและบนจอ ส่วน Repetition ของตัวอักษรเริ่มจากการเลือกคู่ฟอนต์ ซึ่งอธิบายไว้ในบท Font Pairing คืออะไร จับคู่ฟอนต์ไทยให้คนทุกวัยอ่านง่าย

Balance ยังต้องใช้คนตัดสิน

Balance เป็นหลักการข้อเดียวในห้าข้อที่ค่าตายตัวรับประกันไม่ได้ งานสองชิ้นที่ใช้สี ฟอนต์ และระยะห่างจากไฟล์เดียวกันยังเอียงได้ ถ้าภาพสินค้าใหญ่อยู่ซ้ายและไม่มีอะไรถ่วงทางขวา

AI ตรวจ Balance ของงานออกแบบแทนคนได้ไหม

ยังแทนไม่ได้ทั้งหมด เครื่องมือตรวจได้ว่าทุกค่าอยู่ในรายการที่อนุญาต แต่การตัดสินว่าภาพหนึ่งภาพดูหนักไปด้านใดขึ้นกับขนาด สี ความเข้ม และความหมายของสิ่งในภาพพร้อมกัน ผลการทดลองเรื่องกฎสามส่วนในบท Rule of Thirds คืออะไร องค์ประกอบภาพตามงานวิจัยการมองจริง แสดงว่าค่าที่คอมพิวเตอร์คำนวณจากตำแหน่งจุดเด่นไม่สัมพันธ์กับคะแนนความงามที่คนให้ ขั้นตอนที่ใช้ได้คือให้เครื่องมือตรวจสี่ข้อที่เป็นค่า แล้วให้คนดู Balance เป็นขั้นสุดท้ายก่อนอนุมัติ

Design Tokens บนเว็บของฟิจิ⁠ทัล

เว็บไซต์ phygital.co.th ย้ายค่าการออกแบบเข้าบล็อก @theme ของ Tailwind CSS เวอร์ชัน 4 ในไฟล์ app/globals.css เมื่อ 18 สิงหาคม 2569 บล็อกนี้มีค่าประกาศ 27 รายการ ครอบคลุมสีแบรนด์ ชุดฟอนต์ การไล่สี ความเร็วของแอนิเมชัน และจุดเปลี่ยนความกว้างจอ ไฟล์ตั้งค่า Tailwind แบบเดิมถูกเก็บไว้เป็นไฟล์ว่าง ค่าจริงจึงมีที่อยู่แห่งเดียว

ระบบนี้ยังไม่ได้อยู่ในรูปแบบไฟล์ .tokens ของ DTCG เพราะใช้ไวยากรณ์ CSS ของ Tailwind แต่ใช้หลักเดียวกัน คือส่วนประกอบของเว็บอ้างชื่อค่า เช่น --color-brand-primary แทนการพิมพ์ค่าสีซ้ำในแต่ละไฟล์

เริ่มเขียนกฎออกแบบเป็นไฟล์สี่ขั้น

ธุรกิจที่ยังไม่มีระบบออกแบบเริ่มได้จากงานที่มีอยู่แล้ว ไม่ต้องออกแบบใหม่ทั้งหมด ลำดับด้านล่างเรียงจากค่าที่แก้ง่ายไปยาก

รวบรวมค่าที่ใช้จริง เปิดงานสิบชิ้นล่าสุด จดสี ฟอนต์ ขนาดตัวอักษร และระยะห่างที่พบ แล้วนับว่าค่าไหนซ้ำ ค่าที่พบครั้งเดียวมักเป็นค่าที่พิมพ์ผิดหรือเดาเอง
ตั้งจานสีกับขั้นระยะห่าง เลือกฐานระยะห่างหนึ่งค่า เช่น 4 หรือ 8 พิกเซล แล้วปัดทุกค่าที่พบเข้าขั้นที่ใกล้ที่สุด
ตั้งชื่อค่าตามหน้าที่ แยกชั้นจานสีกับชั้นหน้าที่ และตรวจค่าความต่างของทุกคู่สีที่ชั้นหน้าที่ระบุว่าจะวางด้วยกัน
บันทึกเป็นไฟล์ที่เครื่องมืออ่านได้ ถ้าทีมใช้โปรแกรมออกแบบและโค้ดคนละชุด รูปแบบ .tokens ของ DTCG เป็นตัวกลางที่เป็นกลางต่อเครื่องมือ แล้วเขียนคู่มือสั้น ๆ อธิบายว่าเมื่อใดใช้ค่าไหน

ขั้นที่ 4 ไม่ได้แทนการตรวจ Balance ซึ่งยังต้องให้คนดูงานจริงทีละชิ้นเป็นขั้นสุดท้าย

สรุป

หลักการออกแบบกราฟิกห้าข้อคือ Balance, Contrast, Alignment, Proximity และ Repetition สี่ข้อหลังเขียนเป็นค่าตายตัวที่เครื่องมือตรวจได้ ผ่านคู่สีที่อนุญาต กริด ขั้นระยะห่าง และค่าอ้างอิงที่ทุกชิ้นงานดึงไปใช้ ระบบออกแบบของ USWDS กับ GOV.UK แสดงตัวอย่างขั้นระยะห่างที่ไม่ให้ผู้ออกแบบพิมพ์ตัวเลขเอง รูปแบบไฟล์ Design Tokens ของ DTCG ฉบับ 2025.10 ให้ผู้ออกแบบ ทีมพัฒนา และ AI อ่านค่าชุดเดียวกัน ส่วน Balance ยังต้องให้คนดูงานจริงก่อนอนุมัติ

คำถามที่พบบ่อย (FAQ)

ฐาน 8 พิกเซลให้ขั้นที่ห่างกันชัดและจำง่าย ฐาน 4 พิกเซลให้ความละเอียดมากกว่าสำหรับของชิ้นเล็กอย่างไอคอนหรือช่องว่างในปุ่ม ระบบ USWDS ใช้ฐาน 8 พิกเซลและเพิ่มขั้น 4 กับ 12 พิกเซลสำหรับระยะเล็ก

ไม่จำเป็นต้องทำเป็นไฟล์ตามข้อกำหนดของ DTCG ทันที แต่ควรมีรายการค่าสี ฟอนต์ และขั้นระยะห่างที่ตกลงกันไว้ในที่เดียว เมื่อธุรกิจเริ่มจ้างผู้ออกแบบคนที่สองหรือทำเว็บไซต์ รายการนี้จะถูกแปลงเป็นไฟล์ได้ง่าย

ต้องตรวจกับผู้ผลิตโปรแกรมแต่ละราย ข้อกำหนดฉบับล่าสุดเพิ่งมีสถานะเสถียรเมื่อเดือนตุลาคมปีก่อน ข้อกำหนดเองแนะนำให้ใช้นามสกุล .tokens.json ในช่วงที่รูปแบบนี้ยังไม่แพร่หลาย เพื่อให้เปิดด้วยโปรแกรมแก้ไข JSON ทั่วไปได้

ใช้เป็นตัวอย่างวิธีคิดได้ ไม่ควรใช้ค่าตรง ๆ ทั้งระบบ เพราะค่าเหล่านั้นออกแบบมาสำหรับตัวอักษรละตินและเว็บบริการรัฐ ข้อความภาษาไทยต้องการพื้นที่แนวตั้งสำหรับสระบนสระล่างและวรรณยุกต์ ค่าระยะบรรทัดจึงควรทดสอบกับข้อความไทยจริงก่อนใช้

ช่วยเรื่องชื่อและค่าที่ใช้ร่วมกัน แต่ค่าสีบนจอกับค่าสีบนงานพิมพ์ใช้ระบบสีต่างกัน ไฟล์ค่าการออกแบบจึงควรเก็บค่าสีสำหรับงานพิมพ์แยกไว้ใต้ชื่อเดียวกัน

PHYGITAL INSIGHT

ฟิจิ⁠ทัลย้ายค่าการออกแบบของเว็บตัวเองเข้าบล็อกเดียว 27 รายการเมื่อสิงหาคม 2569 และเห็นผลว่าการเปลี่ยนสีหรือฟอนต์ทำได้จากจุดเดียวโดยไม่ต้องไล่แก้ทีละหน้า ธุรกิจที่จ้างผู้ออกแบบหลายรายหรือใช้ AI สร้างภาพต้องการกฎแบบเดียวกันในงานกราฟิก บริการงานกราฟิกของฟิจิ⁠ทัลส่งมอบค่าสี ฟอนต์ และขั้นระยะห่างเป็นไฟล์ที่ทีมและเครื่องมือของลูกค้าอ่านได้ คู่กับคู่มือที่อธิบายเหตุผลของแต่ละค่า

ให้ PHYGITAL AGENCY ช่วยต่อยอดเรื่องนี้สู่ผลลัพธ์จริง

GRAPHIC DESIGN

ออกแบบกราฟิก

CORPORATE IDENTITY

ออกแบบอัตลักษณ์องค์กร

WEBSITE

ออกแบบ จัดทำ ดูแลเว็บไซต์ และแอปพลิเคชั่น

CONTENT MARKETING

สร้างเนื้อหาทางการตลาด

ผู้ออกแบบสามรายกับเครื่องมือ AI หนึ่งตัวตีความ "สีแบรนด์" ได้สี่แบบ ถ้าไม่มีค่ากลางให้ทุกฝ่ายอ่าน

ให้ PHYGITAL AGENCY วางค่าสี ฟอนต์ และระยะห่างของแบรนด์ให้ทุกทีมและทุกเครื่องมือใช้ชุดเดียวกัน

นัดประชุมผ่าน Google Meet เพิ่มเพื่อนใน LINE

WRITTEN BY

PARANATH PANARATANA

CHAIRMAN OF PHYGITAL AGENCY

ประธานกรรมการบริษัท ฟิจิทัล เอเจนซี จำกัด มีประสบการณ์ดูแลการตลาดที่ผสานโลกจริงและโลกออนไลน์เข้าด้วยกัน ตลอดจนเป็นที่ปรึกษาในการวินิจฉัยธุรกิจ อีกทั้งยังเคยทำงานในสายวิดีโอโปรดักชั่นและภาพยนตร์ไทยอีกด้วย

แนะนำบทความถัดไป

ดูทั้งหมดใน ART & CREATIVE

หลักการออกแบบกราฟิก 5 ข้อ คืออะไร เขียนเป็น Design Tokens

KEY TAKEAWAYS

หลักการออกแบบกราฟิก 5 ข้อ คือ Balance, Contrast, Alignment, Proximity และ Repetition

Design Tokens Community Group เผยแพร่รูปแบบไฟล์ Design Tokens ฉบับ 2025.10 เมื่อ 28 ตุลาคม 2568 และระบุสถานะว่าเสถียร

ระบบออกแบบของหน่วยงานรัฐสองแห่งกำหนดระยะห่างเป็นขั้นบันได

สารบัญ

หลักการออกแบบกราฟิก 5 ข้อ

หลักการออกแบบกราฟิก 5 ข้อ มีอะไรบ้าง

Design Tokens คืออะไร

Design Tokens ต่างจากคู่มือแบรนด์แบบ PDF อย่างไร

รูปแบบไฟล์ Design Tokens ของ DTCG

ทำไมรูปแบบไฟล์กลางถึงสำคัญกับงานที่ใช้ AI

Proximity กับ Alignment ในระบบออกแบบของรัฐ

ระยะห่างแบบขั้นบันไดช่วยเรื่อง Proximity อย่างไร

Contrast กับ Repetition เขียนเป็นค่าอ้างอิง

ควรตั้งชื่อค่าสีตามสีหรือตามหน้าที่

Balance ยังต้องใช้คนตัดสิน

AI ตรวจ Balance ของงานออกแบบแทนคนได้ไหม

Design Tokens บนเว็บของฟิจิ⁠ทัล

เริ่มเขียนกฎออกแบบเป็นไฟล์สี่ขั้น

สรุป

คำถามที่พบบ่อย (FAQ)

ฐานระยะห่าง 4 พิกเซลกับ 8 พิกเซลต่างกันอย่างไร

ธุรกิจเล็กที่มีผู้ออกแบบคนเดียวต้องทำ Design Tokens ไหม

โปรแกรมออกแบบที่ใช้อยู่รองรับไฟล์ .tokens หรือยัง

ระบบออกแบบของหน่วยงานรัฐต่างประเทศนำมาใช้กับแบรนด์ไทยได้ไหม

Design Tokens ช่วยเรื่องงานพิมพ์ด้วยหรือไม่

PHYGITAL INSIGHT

GRAPHIC DESIGN

CORPORATE IDENTITY

WEBSITE

CONTENT MARKETING

ผู้ออกแบบสามรายกับเครื่องมือ AI หนึ่งตัวตีความ "สีแบรนด์" ได้สี่แบบ ถ้าไม่มีค่ากลางให้ทุกฝ่ายอ่าน

PARANATH PANARATANA

แนะนำบทความถัดไป

กราฟิกไทยร่วมสมัย เลือกความเป็นไทยให้ตรงบุคลิกแบรนด์

โค้ดสีไทยสำหรับหน้าเว็บ แปลง CMYK เป็น HEX แล้วทดสอบก่อนใช้

สีไทยในคู่มืออัตลักษณ์ศิลปากร 15 สีประจำคณะและรหัสสีทาอาคาร

KEY TAKEAWAYS

หลัก​การ​ออกแบบ​กราฟิก 5 ข้อ คือ Balance, Contrast, Alignment, Proximity และ Repetition

Design Tokens Community Group เผย​แพร่​รูป​แบบ​ไฟล์ Design Tokens ฉบับ 2025.10 เมื่อ 28 ตุลาคม 2568 และ​ระบุ​สถานะ​ว่า​เสถียร

ระบบ​ออกแบบ​ของ​หน่วย​งาน​รัฐ​สอง​แห่ง​กำหนด​ระยะ​ห่าง​เป็น​ขั้น​บันได

สารบัญ

หลัก​การ​ออกแบบ​กราฟิก 5 ข้อ

หลัก​การ​ออกแบบ​กราฟิก 5 ข้อ มี​อะไร​บ้าง

Design Tokens คือ​อะไร

Design Tokens ต่าง​จาก​คู่มือ​แบรนด์​แบบ PDF อย่างไร

รูป​แบบ​ไฟล์ Design Tokens ของ DTCG

ทำไม​รูป​แบบ​ไฟล์​กลาง​ถึง​สำคัญ​กับ​งาน​ที่​ใช้ AI

Proximity กับ Alignment ใน​ระบบ​ออกแบบ​ของ​รัฐ

ระยะ​ห่าง​แบบ​ขั้น​บันได​ช่วย​เรื่อง Proximity อย่างไร

Contrast กับ Repetition เขียน​เป็น​ค่า​อ้างอิง

ควร​ตั้ง​ชื่อ​ค่า​สี​ตาม​สีห​รือ​ตาม​หน้าที่

Balance ยัง​ต้อง​ใช้​คน​ตัดสิน

AI ตรวจ Balance ของ​งาน​ออกแบบ​แทน​คน​ได้​ไหม

Design Tokens บน​เว็บ​ของ​ฟิจิ⁠ทัล

เริ่ม​เขียน​กฎ​ออกแบบ​เป็น​ไฟล์​สี่​ขั้น

สรุป

คำถามที่พบบ่อย (FAQ)

ฐาน​ระยะ​ห่าง 4 พิกเซล​กับ 8 พิกเซล​ต่าง​กัน​อย่างไร

ธุรกิจ​เล็ก​ที่​มี​ผู้​ออกแบบ​คน​เดียว​ต้อง​ทำ Design Tokens ไหม

โปรแกรม​ออกแบบ​ที่​ใช้​อยู่​รองรับ​ไฟล์ .tokens หรือ​ยัง

ระบบ​ออกแบบ​ของ​หน่วย​งาน​รัฐ​ต่าง​ประเทศ​นำ​มา​ใช้​กับ​แบรนด์​ไทย​ได้​ไหม

Design Tokens ช่วย​เรื่อง​งาน​พิมพ์​ด้วย​หรือ​ไม่

PHYGITAL INSIGHT

บริการที่เกี่ยวข้อง

GRAPHIC DESIGN

CORPORATE IDENTITY

WEBSITE

CONTENT MARKETING

PARANATH PANARATANA

แนะนำบทความถัดไป

กราฟิก​ไทย​ร่วม​สมัย เลือก​ความ​เป็น​ไทย​ให้​ตรง​บุคลิก​แบรนด์

โค้ด​สี​ไทย​สำหรับ​หน้า​เว็บ แปลง CMYK เป็น HEX แล้ว​ทดสอบ​ก่อน​ใช้

สี​ไทย​ใน​คู่มือ​อัต​ลักษณ์​ศิลปากร 15 สี​ประจำ​คณะ​และ​รหัส​สี​ทา​อาคาร

หลักการออกแบบกราฟิก 5 ข้อ คือ Balance, Contrast, Alignment, Proximity และ Repetition

Design Tokens Community Group เผยแพร่รูปแบบไฟล์ Design Tokens ฉบับ 2025.10 เมื่อ 28 ตุลาคม 2568 และระบุสถานะว่าเสถียร

ระบบออกแบบของหน่วยงานรัฐสองแห่งกำหนดระยะห่างเป็นขั้นบันได

หลักการออกแบบกราฟิก 5 ข้อ

หลักการออกแบบกราฟิก 5 ข้อ มีอะไรบ้าง

Design Tokens คืออะไร

Design Tokens ต่างจากคู่มือแบรนด์แบบ PDF อย่างไร

รูปแบบไฟล์ Design Tokens ของ DTCG

ทำไมรูปแบบไฟล์กลางถึงสำคัญกับงานที่ใช้ AI

Proximity กับ Alignment ในระบบออกแบบของรัฐ

ระยะห่างแบบขั้นบันไดช่วยเรื่อง Proximity อย่างไร

Contrast กับ Repetition เขียนเป็นค่าอ้างอิง

ควรตั้งชื่อค่าสีตามสีหรือตามหน้าที่

Balance ยังต้องใช้คนตัดสิน

AI ตรวจ Balance ของงานออกแบบแทนคนได้ไหม

Design Tokens บนเว็บของฟิจิ⁠ทัล

เริ่มเขียนกฎออกแบบเป็นไฟล์สี่ขั้น

ฐานระยะห่าง 4 พิกเซลกับ 8 พิกเซลต่างกันอย่างไร

ธุรกิจเล็กที่มีผู้ออกแบบคนเดียวต้องทำ Design Tokens ไหม

โปรแกรมออกแบบที่ใช้อยู่รองรับไฟล์ .tokens หรือยัง

ระบบออกแบบของหน่วยงานรัฐต่างประเทศนำมาใช้กับแบรนด์ไทยได้ไหม

Design Tokens ช่วยเรื่องงานพิมพ์ด้วยหรือไม่

กราฟิกไทยร่วมสมัย เลือกความเป็นไทยให้ตรงบุคลิกแบรนด์

โค้ดสีไทยสำหรับหน้าเว็บ แปลง CMYK เป็น HEX แล้วทดสอบก่อนใช้

สีไทยในคู่มืออัตลักษณ์ศิลปากร 15 สีประจำคณะและรหัสสีทาอาคาร