Figma Design Token Converter: แปลง Token JSON เป็น CSS, SCSS และ Tailwind ได้ในคลิกเดียว

Design token คือสะพานเชื่อมระหว่าง Figma กับ codebase ของคุณ มันเก็บทุกสี ทุกค่า spacing และทุกขนาดตัวอักษรไว้เป็น structured data เพื่อให้สิ่งที่ designer อนุมัติใน Figma คือสิ่งเดียวกับที่ขึ้น production จริง ๆ แต่สะพานนี้มีช่วงที่ขาดหายไป: ปลั๊กอิน Figma Tokens export ออกมาเป็น JSON ขณะที่ stylesheet ต้องการ CSS custom properties, โปรเจกต์ Sass ต้องการ SCSS variables และโปรเจกต์ Tailwind ต้องการ theme object — การคัดลอกค่าเหล่านี้ด้วยมือช้า และที่แย่กว่านั้นคือมันเอนหลัง (drift) เพราะพอมีคนพิมพ์ #6366F1 ผิดเป็น #6366f2 แปลว่า design system ของคุณถูกแตกแขนงเงียบ ๆ ไปแล้ว

Figma Design Token Converter ถูกสร้างมาเพื่อปิดช่องว่างนี้ วาง token JSON ของคุณ — รองรับทั้งฟอร์แมตปลั๊กอิน Figma Tokens และฟอร์แมต W3C Design Tokens — แล้วเครื่องมือจะสร้างผลลัพธ์พร้อมใช้งานสามแบบทันที: tokens.css ที่เป็น CSS custom properties, _tokens.scss ที่เป็น SCSS variables และ tailwind-theme.txt ที่เป็น Tailwind theme values ระหว่างทางมันยัง resolve alias reference ให้อัตโนมัติ ดังนั้น token ที่นิยามว่า "พื้นหลังปุ่มชี้ไปที่ color primary" จะออกมาพร้อมค่า hex จริงฝังอยู่ในตัว

ทุกอย่างทำงานแบบ 100% client-side ใน browser ของคุณ ไม่มีการอัปโหลดใด ๆ ไม่ต้องสมัครสมาชิก และแท็บผลลัพธ์แต่ละแท็บมีปุ่ม copy และ download แบบคลิกเดียว บทความนี้จะพาไปดูว่าทำไมเรื่องนี้ถึงสำคัญ conversion ทำงานอย่างไร และจะนำเครื่องมือนี้ไปใช้ใน design system workflow จริงได้อย่างไร

ทำไมต้องใช้ Figma Design Token Converter?

• แหล่งความจริงเดียว ครบสามฟอร์แมต: Designer ดูแล token ใน Figma ส่วน developer ต้องการใน CSS, SCSS หรือ Tailwind เครื่องมือนี้แปลง JSON ที่วางครั้งเดียวให้ได้ครบทั้งสามแบบ ไม่ต้องมีใครดูแลสำเนาค่าเดิมหลายชุด

• Resolve alias อัตโนมัติ: ไฟล์ token เต็มไปด้วย reference จาก token ไปหา token เช่น พื้นหลังปุ่มชี้ไปที่ {color.primary} เครื่องมือจะไล่ตาม reference chain ทุกเส้นแล้วแทนที่ด้วยค่าจริง — ซึ่งเป็นจุดที่การคัดลอกด้วยมือพลาดบ่อยที่สุด

• รองรับทั้งสองฟอร์แมตหลัก: ทีมคุณ export จากปลั๊กอิน Figma Tokens หรือใช้ฟอร์แมต W3C Design Tokens ก็ตาม เครื่องมือ parse ได้ทันทีโดยไม่ต้องจัดฟอร์แมตใหม่หรือเปลี่ยนชื่อ field เอง

• ผลลัพธ์แบบแท็บ พร้อม copy และ download: ผลลัพธ์แต่ละไฟล์ — tokens.css, _tokens.scss และ tailwind-theme.txt — อยู่ในแท็บของตัวเอง กด copy หรือ download ได้ทันที ต่อเข้า repo ได้ในไม่กี่วินาที

• เป็นส่วนตัวและคาดเดาผลได้: ข้อมูลไม่หลุดออกจากเครื่อง ซึ่งสำคัญมากกับ brand palette ที่ยังไม่เปิดตัว และ JSON เดิมจะให้ผลลัพธ์เหมือนเดิมทุกครั้ง ทำให้การ regenerate token ทุกครั้งที่ design อัปเดตเป็นขั้นตอนที่ปลอดภัยและทำซ้ำได้

Key Features

• การ resolve alias คือจุดต่างที่แท้จริง ไฟล์ token เป็นกราฟ ไม่ใช่ลิสต์แบน ๆ: button.bg อาจชี้ไปที่ color.primary ซ้อนกันหลายชั้น การไล่ด้วยตาเสี่ยงพลาดสูง แต่เครื่องมือทำได้อย่างแม่นยำทุกครั้ง

• ผลลัพธ์สามแท็บสะท้อนการใช้งานจริง codebase จำนวนมากใช้สองฟอร์แมตพร้อมกัน — CSS custom properties สำหรับ component, SCSS ในเลเยอร์เดิม และ Tailwind theme object สำหรับ utility — การวางครั้งเดียวได้ครบทั้งสามจึงทำให้ทุกเลเยอร์ตรงกันเสมอ

วิธีใช้งาน

1. Export token JSON จาก Figma. ใช้ฟังก์ชัน export ของปลั๊กอิน Figma Tokens เพื่อดาวน์โหลด token เป็น JSON ถ้าทีมเก็บ token ในฟอร์แมต W3C Design Tokens ก็ export ไฟล์นั้นแทนได้เลย — ใช้ได้ทั้งคู่
2. เปิด Figma Design Token Converter แล้ววาง JSON. เครื่องมือ parse ให้ทันที — ไม่ต้องตั้งค่า ไม่ต้อง map field ไม่ต้องสมัครสมาชิก
3. เลือกแท็บผลลัพธ์. สลับระหว่าง tokens.css, _tokens.scss และ tailwind-theme.txt ตามฟอร์แมตที่โปรเจกต์ต้องการ
4. กด copy หรือ download. ใช้ปุ่ม copy คลิกเดียวสำหรับแก้ไขด่วน หรือดาวน์โหลดไฟล์เพื่อ commit เข้า repository ได้เลย
5. ต่อเข้าโปรเจกต์และ regenerate ทุกครั้งที่ token เปลี่ยน. ดรอป tokens.css ลง global styles, _tokens.scss ลง Sass entry หรือ merge ค่า Tailwind เข้า config — แล้วทำซ้ำทุกครั้งที่มี token ใหม่

Token, Alias และผลลัพธ์ทั้งสามแบบ

Design token แปลงการตัดสินใจด้านดีไซน์ให้เป็นข้อมูล สีหนึ่งสีไม่ใช่แค่ hex string ที่ฝังอยู่ใน component แต่เป็นค่าที่มีชื่ออย่าง color.primary พร้อมบทบาทที่ชัดเจน และ spacing, radius หรือขนาด typography ก็ทำงานแบบเดียวกัน เพราะการตัดสินใจเหล่านี้อยู่ในไฟล์ที่มีโครงสร้าง มันจึงเดินทางได้ — จาก Figma สู่โค้ด จากธีมสว่างสู่ธีมมืด

สองฟอร์แมตที่รองรับเขียนแนวคิดเดียวกันต่างกันเล็กน้อย: ฟอร์แมตปลั๊กอิน Figma Tokens ห่อค่าไว้ใน key ชื่อ value ส่วนฟอร์แมต W3C ใช้ $value พร้อม $type เสริมได้ ทั้งคู่อนุญาตให้ token หนึ่งตัวเก็บค่าตรง ๆ หรือ reference ไปหา token อื่น — ที่เรียกว่า alias — ด้วย syntax วงเล็บปีกกา:

{
  "color": {
    "primary": { "value": "#6366f1" }
  },
  "button": {
    "bg": { "value": "{color.primary}" }
  }
}

"{color.primary}" ในที่นี้คือ alias: พื้นหลังปุ่มไม่ได้เป็นเจ้าของสีเอง แต่ชี้ไปหาอีก token หนึ่ง เมื่อทีมดีไซน์เปลี่ยน color.primary ทุก alias ที่อ้างอิงมันจะอัปเดตใน Figma ทันที เครื่องมือนี้รักษาพฤติกรรมเดียวกันไว้ในโค้ด โดย resolve reference ก่อนสร้างผลลัพธ์ — นี่คือก่อนและหลังของ tokens.css:

:root {
  --color-primary: #6366f1;
  --button-bg: #6366f1;
}

ผลลัพธ์แต่ละแบบเจาะกลุ่มผู้ใช้ต่างกัน CSS custom properties คือตัวเลือกยุคใหม่: browser รองรับทุกเจ้าและ override เป็นธีมได้ SCSS variables เหมาะกับ codebase ที่ใช้ Sass ซึ่งตัวแปรถูก compile หายไปตอน build — ง่ายกว่า แต่ทำ runtime theming ไม่ได้ ส่วนไฟล์ Tailwind theme คือ extension object สำหรับ tailwind.config ที่เปลี่ยนทุก token เป็น utility อย่าง bg-primary ได้ทันที เครื่องมือช่วยให้ทั้งสามแบบชี้ไปที่ความจริงชุดเดียวกัน

Use Cases ที่ใช้ได้จริง

ส่งมอบงาน design system

สถานการณ์คลาสสิก: designer ปิด token set ใน Figma แล้ว developer ต้องมีมันใน codebase ก่อน sprint จบ Export แปลง commit — สิ่งที่ทีมดีไซน์ตรวจแล้วคือสิ่งที่ลง repository เป๊ะ ๆ ไม่มี hex code แบบ "ใกล้เคียงพอ"

Token set สำหรับ dark mode

ธีมมืดมักเป็นไฟล์ token ชุดที่สอง ที่ทุก semantic token ถูก alias ไปหาค่าใหม่ แปลงสองชุดแยกกันแล้วคุณจะได้ stylesheet สองไฟล์ที่ใช้ชื่อ token เหมือนกันหมด สโคปภายใต้ attribute data-theme แล้ว dark mode ของคุณจะสืบทอดโครงสร้าง alias เดียวกับที่ designer สร้างไว้ใน Figma

Multi-brand theming

หลายแบรนด์บน codebase เดียวหมายความว่าแต่ละแบรนด์คือไฟล์ token หนึ่งชุด: ชื่อเดิม ค่าต่างกัน และใช้ alias หนัก ๆ เพื่อให้ component ที่แชร์กันไม่ต้องแตะ สร้างผลลัพธ์ CSS หนึ่งชุดต่อแบรนด์ โหลดชุดที่ถูกต้องตาม deployment แล้ว component stylesheet เดียวรองรับทุกแบรนด์

ทำให้ Tailwind config ตรงกันเสมอ

โปรเจกต์ Tailwind มักเอนหลังเมื่อมีคนเปลี่ยนสีใน Figma แต่ลืมไฟล์ config ทำให้เครื่องมือนี้เป็นส่วนหนึ่งของ release routine: regenerate tailwind-theme.txt ทุกครั้งที่ token เปลี่ยน แล้ว merge เข้า config ยูทิลิตี้อย่าง bg-primary จะตาม Figma ได้เป๊ะ

Best Practices

• ตั้งชื่อ token ตามความหมาย ไม่ใช่ตามค่า color.primary รอดจากการรีแบรนด์ แต่ color.indigo ไม่ได้ ชื่อเชิงความหมายทำให้ alias ยังเข้าที่และผลลัพธ์ที่ generate ออกมาเสถียร
• ให้เครื่องมือ resolve alias ก่อนเทียบ diff การเทียบ JSON ดิบที่ยังมี reference ซ่อนการเปลี่ยนแปลงจริง เทียบผลลัพธ์ที่ generate แทน — ค่าจริงทำให้ทุก drift เห็นชัดใน diff ธรรมดา
• Regenerate ทุกครั้งที่ token release ยึดไฟล์ที่ generate เหมือน build artifact คือสร้างจากเครื่องมือทุกครั้งที่ token เปลี่ยน และห้ามแก้มือ — การแก้มือคือจุดเริ่มของการแตกแขนง
• Commit ผลลัพธ์ทั้งสามไฟล์แม้วันนี้ใช้ไฟล์เดียว ไฟล์ที่ยังไม่ได้ใช้ในไตรมาสนี้ไม่มีต้นทุน แต่ช่วยประหยัดรอบ regenerate เมื่อทีมอื่นเปลี่ยนไปใช้สแตกนั้น
• เก็บ JSON ที่ export ไว้ใน repository การเก็บ token source ไว้ข้างไฟล์ที่ generate ทำให้ pipeline ตรวจสอบย้อนหลังได้ และให้ CI ตรวจได้ว่าผลลัพธ์ยังอัปเดตอยู่

เริ่มแปลง Design Token ของคุณวันนี้

ถ้า design token อยู่ใน Figma แล้ว ไมล์สุดท้ายสู่โค้ดควรใช้เวลาไม่กี่วินาที ไม่ใช่ช่วงบ่ายทั้งช่วงของการ copy-paste Figma Design Token Converter แปลง Figma Tokens หรือ W3C Design Tokens JSON ของคุณเป็น CSS custom properties, SCSS variables และ Tailwind theme values พร้อม resolve alias ให้ครบ — ฟรี ทันที และทำงานทั้งหมดใน browser Export วาง แล้วส่งมอบทั้งสามฟอร์แมตจากแหล่งความจริงชุดเดียว

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• CSS Custom Properties Generator
• Color Palette Generator
• Tailwind to CSS Converter

ขอให้สนุกกับการแปลง token ครับ

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

ถ: เครื่องมือฟรีจริงไหม และ token JSON ของฉันถูกอัปโหลดไปที่ไหนหรือเปล่า?

ตอบ: ฟรีทั้งหมดไม่ต้องสมัครสมาชิก และไม่มีการอัปโหลดใด ๆ: การ parse, การ resolve alias และการสร้างไฟล์เกิดขึ้นใน browser ของคุณล้วน ๆ ค่า design system จึงไม่เคยออกจากเครื่อง

ถ: converter รองรับฟอร์แมต token แบบไหนบ้าง?

ตอบ: รองรับทั้งฟอร์แมตปลั๊กอิน Figma Tokens และฟอร์แมต W3C Design Tokens โดยเครื่องมือตรวจโครงสร้าง input ให้อัตโนมัติ ไม่ต้องเปลี่ยนชื่อ field เอง

ถ: การ resolve alias ทำอะไรได้จริง ๆ?

ตอบ: token สามารถอ้างอิง token อื่นได้ เช่น พื้นหลังปุ่มชี้ไปที่ {color.primary} เครื่องมือจะไล่ตาม reference ทุกเส้นไปจนถึงค่าจริงตัวสุดท้าย แล้วเขียนค่าที่ resolve แล้วลงในผลลัพธ์ทั้งสามไฟล์

ถ: ไฟล์ผลลัพธ์สามไฟล์ต่างกันอย่างไร?

ตอบ: tokens.css คือ CSS custom properties สำหรับ stylesheet ยุคใหม่, _tokens.scss คือ SCSS variables สำหรับ codebase ที่ใช้ Sass และ tailwind-theme.txt คือ theme extension object สำหรับ merge เข้า Tailwind config

ถ: regenerate ผลลัพธ์ใหม่ได้ทุกครั้งที่ token เปลี่ยนไหม?

ตอบ: ได้ และควรทำแบบนั้น: export JSON ใหม่จาก Figma ทุกครั้งที่มี token release วางลงเครื่องมือ แล้วแทนที่ไฟล์ที่ generate เพื่อให้โค้ดตรงกับดีไซน์เสมอ