ตัวแปลง Figma Design Token
วาง Figma Tokens หรือ W3C Design Tokens JSON แล้วรับ CSS custom properties, SCSS variables และ Tailwind theme snippet ทันที — resolve alias อัตโนมัติ ฟรี
Loading tool...
ตัวแปลง Figma Design Token คืออะไร?
Figma Design Token Converter เป็นเครื่องมือออนไลน์ฟรีที่เปลี่ยน design token ที่ export มาเป็นโค้ด วางไฟล์ W3C Design Tokens หรือ export ของ Tokens Studio for Figma แล้วเครื่องมือจะ flatten ทุก token group เป็น CSS custom properties, SCSS variables และ Tailwind theme snippet — พร้อม resolve alias ระหว่าง token และใส่ quote ให้ font family เพื่อให้ผลลัพธ์ใช้ได้ทันที
ประโยชน์หลัก
- ส่งมอบงานจาก design ไป code ในการวางครั้งเดียว ไม่ต้องพิมพ์ค่า token ซ้ำ
- ได้สามรูปแบบพร้อมกัน: CSS, SCSS และ Tailwind theme
- resolve alias อัตโนมัติ ค่า token ที่อ้างอิงกันสอดคล้องเสมอ
- เป็นส่วนตัวตั้งแต่ออกแบบ — ไฟล์ token ไม่ออกจากเบราว์เซอร์
กรณีการใช้งาน
- •เปลี่ยน export ของ Tokens Studio เป็น CSS variables สำหรับ design system
- •สร้าง Tailwind theme.extend block จาก token palette ของคุณ
- •ส่งมอบ SCSS variables ให้ codebase เก่าที่ใช้ custom properties ไม่ได้
- •ตรวจโครงสร้างไฟล์ token ก่อน commit เข้า repo
วิธีแปลง Design Tokens เป็น CSS, SCSS และ Tailwind
- Export tokens ของคุณ: ใน Tokens Studio for Figma ใช้ Export เพื่อรับไฟล์ JSON หรือบันทึกไฟล์ W3C Design Tokens (รูปแบบ $value / $type) — ไฟล์เดียวทำงานได้ดีที่สุด ถ้าแยกหลายไฟล์ให้ merge ก่อน
- วาง JSON ลงในเครื่องมือ: วางเนื้อหาไฟล์ลงในช่อง input — converter ตรวจ format ให้อัตโนมัติและ parse ไปพร้อมกับที่คุณพิมพ์ ลองกดปุ่มตัวอย่างเพื่อดูการทำงาน
- เลือกรูปแบบผลลัพธ์: สลับระหว่าง CSS variables, SCSS variables และ Tailwind theme snippet — alias ถูก resolve ให้แล้ว และ font family มี quote ถูกต้องตาม CSS
- คัดลอกหรือดาวน์โหลดผลลัพธ์: กด Copy เพื่อนำไปใส่ใน stylesheet หรือ Download เพื่อบันทึก tokens.css, _tokens.scss หรือ Tailwind snippet — ไม่มีการ upload อะไรทั้งสิ้น ทำงานในเครื่องล้วน
คุณสมบัติหลัก
- อ่านได้ทั้ง W3C Design Tokens ($value) และ Tokens Studio for Figma (value)
- ส่งออกเป็น CSS custom properties, SCSS variables และ Tailwind theme groups
- resolve alias อัตโนมัติ พร้อมกัน cycle
- dot path กลายเป็นชื่อ kebab-case (color.primary.500 กลายเป็น --color-primary-500)
- ใส่ quote ให้ font family ถูกต้องตาม CSS
- copy หรือดาวน์โหลดแต่ละรูปแบบได้คลิกเดียว — ข้อมูลไม่ออกจากเบราว์เซอร์
คำถามที่พบบ่อย
รองรับ design token format แบบไหนบ้าง?
สองแบบ คือ W3C Design Tokens Format (token ที่ประกาศด้วย $value และ $type ที่ไม่บังคับ) และ export ของ Tokens Studio for Figma (token ที่ประกาศด้วย value และ type) — converter ตรวจเองอัตโนมัติว่าคุณวางแบบไหน ไม่ต้องเลือกโหมดเอง
จัดการ alias reference อย่าง {color.primary.500} อย่างไร?
reference ระหว่าง token ถูก resolve แบบ recursive ก่อนส่งออก ทำให้ token ที่เป็น alias แสดงค่าสุดท้ายที่ชี้ไป โดยมี depth limit กันไว้ ถ้าเจอ circular reference จะคืนค่า raw text แทนที่จะค้างตาย
token path ถูก map ไปยัง Tailwind theme key อย่างไร?
segment แรกของ path ถูกจับคู่กับหมวดที่รู้จัก — color กลายเป็น colors, fontSizes กลายเป็น fontSize, dimension กลายเป็น spacing, shadows กลายเป็น boxShadow และอื่น ๆ ส่วนที่เหลือถูกต่อเป็น key แบบ kebab-case เช่น color.primary.500 กลายเป็น colors.primary-500 — path ที่ไม่ตรงหมวดที่รู้จักจะถูกข้ามในแท็บ Tailwind แต่ยังอยู่ใน CSS และ SCSS
ข้อมูล token ของผมออกจากเบราว์เซอร์ไหม?
ไม่ — parsing และ conversion ทำงานฝั่ง client ล้วนด้วย JavaScript ไม่มี upload ไม่มี API call และไม่มี telemetry เครื่องมือใช้งานแบบออฟไลน์ได้เลยเมื่อหน้าเว็บโหลดแล้ว