จาก Design Token ใน Figma สู่ Tailwind: สี, Type และ Spacing

คำตอบสั้นๆ: ค่าสี/ข้อความ/spacing ใน Figma จะ map ไปเป็น Tailwind โดยการจับคู่กับสเกล utility ของ Tailwind เอง — ขั้น spacing ที่ใกล้ที่สุด สีที่ใกล้เคียงที่สุด ขนาด type ที่ตรงกัน เมื่อค่าใดหลุดจากสเกลนั้น เอาต์พุตจะ fallback ไปเป็นคลาสค่าตามใจ (arbitrary value) อย่าง bg-[#f4f4f5] แทนที่จะสร้างสีธีมใหม่ที่ไม่มีอยู่ใน config ของคุณ

"Design token" ในไฟล์ Figma หมายถึงอะไรกันแน่

ก่อนจะเข้าใจการแม็ปได้ ควรระบุให้ชัดก่อนว่าอะไรนับเป็น token และอะไรเป็นแค่ค่าที่ใช้ครั้งเดียวในไฟล์ Figma

• Color styles — fill ที่บันทึกไว้และตั้งชื่อ (เช่น "Gray/100") ที่ถูกใช้อย่างสม่ำเสมอทั่วทั้งไฟล์ ต่างจากค่า hex ดิบที่เลือกครั้งเดียวแล้วไม่เคยนำกลับมาใช้ซ้ำ
• Text styles — ชุดค่าฟอนต์ ขนาด น้ำหนัก และ line-height ที่บันทึกไว้ ใช้กับหัวข้อหรือเนื้อหาข้อความอย่างสม่ำเสมอ
• Spacing values — โดยทั่วไปไม่ได้ "บันทึก" เป็นสไตล์แบบเดียวกัน แต่เป็นตัวเลข gap/padding ของ Auto Layout ที่สม่ำเสมอและใช้ซ้ำๆ ในหลายเฟรม

การแม็ปไปยัง Tailwind จะได้ผลดีที่สุดเมื่อไฟล์ Figma ใช้สิ่งเหล่านี้อย่างสม่ำเสมอจริงๆ ไฟล์ที่ทุกปุ่มใช้ color style "Primary" ที่บันทึกไว้ตัวเดียวกัน จะแปลงออกมาเป็นคลาส Tailwind เดียวที่ใช้ซ้ำได้ทุกที่อย่างสะอาด ส่วนไฟล์ที่ปุ่มห้าปุ่มแต่ละปุ่มมีสีน้ำเงินที่ต่างกันเล็กน้อยแบบใช้ครั้งเดียว ก็จะแปลงออกมาเป็นค่า Tailwind ที่ต่างกันเล็กน้อยห้าค่า — เพราะนั่นคือสิ่งที่ดีไซน์มีอยู่จริง ไม่ใช่ข้อบกพร่องของการแปลง

ค่าต่างๆ ถูกไขไปหาสเกลของ Tailwind ได้อย่างไร

จุดเด่นของ Tailwind คือสเกลที่จำกัดและกำหนดไว้ล่วงหน้าสำหรับ spacing สี และ type ไม่ใช่พาเลตแบบเปิด การแปลงเข้าสเกลนั้นจึงหมายถึงการจับคู่ ไม่ใช่การคิดค่าขึ้นใหม่

นี่คือความตั้งใจที่แยกออกจากกันชัดเจน เอาต์พุต Tailwind ของ MarkupGen จะไขค่าเทียบกับสเกลเริ่มต้นจริงของ Tailwind แทนที่จะสร้างธีม tailwind.config แบบกำหนดเองเพื่อบังคับให้ทุกค่า "พอดี" วิธีนี้ทำให้เอาต์พุตซื่อตรงต่อค่าจริงของดีไซน์ — สีที่หลุดสเกลจะปรากฏเป็นคลาสค่าตามใจ ซึ่งเป็นสัญญาณที่มองเห็นได้ว่าควรตรวจสอบกับดีไซเนอร์ว่าควรขยับให้เข้าพาเลตร่วมหรือไม่ แทนที่จะเป็นความผิดพลาดจากการปัดค่าแบบเงียบๆ

สิ่งนี้หมายถึงอะไรสำหรับการตรวจสอบเอาต์พุต

• คลาสค่าตามใจคือสัญญาณ ไม่ใช่บั๊ก. กลุ่มคลาส bg-[#...] ในเอาต์พุตมักหมายความว่าดีไซน์เองมีสีที่ใช้ครั้งเดียวและใกล้เคียงกันมากเกินไป ซึ่งควรรวมเข้าเป็นสไตล์ร่วมกัน คุ้มค่าที่จะแจ้งกลับไปยังฝ่ายดีไซน์ แทนที่จะ "แก้" ในโค้ดเพียงอย่างเดียว
• ตรวจสอบความสม่ำเสมอของ spacing ในทุก component ที่ซ้ำกัน เพราะสเกลของ Tailwind ปัดค่าแต่ละค่าแยกกันเป็นอิสระ ระยะห่างที่เห็นเหมือนกันในสองเฟรมที่ต่างกัน ควรไขไปเป็นคลาสเดียวกัน หากดีไซน์ใช้ตัวเลขเดียวกันจริง
• หากโปรเจกต์มีธีม tailwind.config อยู่แล้ว ให้เทียบค่าตามใจที่สร้างขึ้นกับธีมนั้น สีที่ดูเหมือนหลุดสเกลจากพาเลตเริ่มต้นของ Tailwind อาจเป็นสีที่ตั้งชื่อไว้แล้วใน config ของคุณเอง ซึ่งคุ้มค่าที่จะสลับใส่ด้วยมือ

สำหรับเวิร์กโฟลว์แบบเต็ม — การเอ็กซ์พอร์ตด้วยปลั๊กอิน การสร้างด้วย AI การแก้ไข การเลือกฟอร์แมตเอาต์พุต — ดูได้ที่ Figma to Tailwind CSS: A Practical Conversion Guide

ลองใช้กับดีไซน์ของคุณเอง

วิธีที่เร็วที่สุดในการดูว่าสีและ spacing ในไฟล์ของคุณแปลงออกมาสม่ำเสมอแค่ไหน คือลองรันเฟรมจริงผ่านระบบดู ลองใช้ MarkupGen ฟรี หรือดูหน้า Figma to Tailwind converter เพื่อดูว่ามีอะไรรวมอยู่บ้าง