Figma Translate Plugin: วิธีโลคัลไลซ์งานออกแบบให้เร็วขึ้น

ทำไมการแปลในไฟล์ออกแบบจึงสำคัญสำหรับทีม

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

เมื่อการแปลเกิดขึ้นโดยตรงใน Figma ปัญหาหลายอย่างจะลดลง นักแปลหรือปลั๊กอินเห็นบริบทภาพรอบ ๆ สตริงแต่ละตัวได้ชัดเจน

การสูญเสียบริบทเป็นสาเหตุหลักที่ทำให้อินเทอร์เฟซที่แปลแล้วดูไม่เป็นธรรมชาติ

Layout drift เป็นต้นทุนแฝงอีกอย่างของ workflow แปลภายนอก สตริงภาษาเยอรมันมักยาวกว่าภาษาอังกฤษราว 30%

ตั้งค่าปลั๊กอินแปลภาษา Figma

Figma Community มีปลั๊กอินแปลภาษาหลายตัว บางตัวใช้ API เช่น Google Translate หรือ DeepL บางตัวเชื่อมต่อกับระบบจัดการการแปลเช่น Crowdin, Lokalise หรือ Phrase

ในการติดตั้ง ให้เปิด Figma ไปที่แท็บ Community แล้วค้นหาปลั๊กอิน ปลั๊กอินส่วนใหญ่ต้องใช้ API key จากบริการแปล

เพื่อความสม่ำเสมอในทีม ให้เพิ่มปลั๊กอินเข้าองค์กร Figma เพื่อให้ทุกคนใช้ engine แปลและ glossary เดียวกัน

• ค้นหาปลั๊กอินแปลภาษาใน Figma Community
• ติดตั้งปลั๊กอินและเพิ่ม API key ในแผงตั้งค่า
• ตั้งภาษาต้นทางเริ่มต้น ปกติคือภาษาอังกฤษ
• สำหรับ Figma for Teams หรือ Enterprise ให้เผยแพร่ปลั๊กอินไปยังไลบรารีที่แชร์
• สร้าง glossary ที่แชร์สำหรับคำศัพท์ผลิตภัณฑ์ที่ไม่ควรแปลด้วยเครื่อง

ขั้นตอนการแปลทีละขั้น

workflow การแปลทั่วไปใน Figma เริ่มจากการเลือกเลเยอร์ที่ต้องการแปล คุณสามารถเลือกเลเยอร์ข้อความแต่ละตัว เฟรมทั้งหมด หรือแม้แต่ทั้งหน้า

หลังเลือกเนื้อหาแล้ว เปิดปลั๊กอินและเลือกภาษาเป้าหมาย หากต้องการรักษาภาษาต้นฉบับ ให้ duplicate เฟรมก่อนรันปลั๊กอิน

การดำเนินการแบบ batch คือจุดที่ปลั๊กอินประหยัดเวลาได้จริง ปลั๊กอินสามารถประมวลผลเฟรมทั้งหมดได้ในเวลาไม่ถึงนาที

หลังปลั๊กอินเสร็จ ให้ตรวจสอบแต่ละหน้าจอ มองหาสตริงที่ล้น container และคำที่แปลผิด

• เลือกเลเยอร์ เฟรม หรือทั้งหน้าตามปริมาณเนื้อหาที่ต้องแปล
• duplicate เฟรมก่อนแปลเพื่อเก็บเวอร์ชันภาษาต้นฉบับ
• ใช้โหมด batch เพื่อแปล text node ทั้งหมดในส่วนที่เลือกพร้อมกัน
• ตรวจสอบทุกหน้าจอหลังแปลเพื่อหา overflow และข้อผิดพลาดของคำศัพท์
• ใช้ comment ใน Figma เพื่อแฟล็กสตริงที่ต้องการรีวิวจากคน

จัดการ layout หลังแปล

การขยายตัวของข้อความเป็นปัญหา layout ที่พบบ่อยที่สุดหลังแปล การแปลเป็นภาษาเยอรมัน ฝรั่งเศส หรือโปรตุเกสมักเพิ่มความยาวสตริง 20-40%

auto-layout ของ Figma เป็นเครื่องมือช่วยที่ดีที่สุด หากคอมโพเนนต์ใช้ auto-layout แบบ hug-contents หรือ fill-container ปัญหาการขยายหลายอย่างจะแก้ไขได้อัตโนมัติ

ภาษาที่เขียนจากขวาไปซ้ายเช่น อาหรับและฮีบรู ต้องการมากกว่าการแปลข้อความ layout ทั้งหมดอาจต้องกลับด้าน

line height และ font fallback ก็สำคัญ หาก design system ใช้ typeface ละตินที่ไม่มีอักขระ CJK Figma จะ fallback ไปใช้ system font ที่มี metrics ต่างกัน

• ใช้ auto-layout แบบ hug-contents บนปุ่มและแท็ก
• ตั้ง container ข้อความเป็น fill-container ความกว้างและ auto ความสูง
• ทดสอบด้วยคำแปลจริงเป็นภาษาเยอรมันและญี่ปุ่นตั้งแต่เนิ่น ๆ
• สำหรับภาษา RTL ให้กลับด้าน layout แต่คงไอคอนสากลในทิศทางเดิม
• ตรวจสอบพฤติกรรม font fallback โดยสลับไปที่ locale CJK หรือซิริลลิก

แนวปฏิบัติที่ดีสำหรับการออกแบบหลายภาษา

การสร้าง design system ที่รองรับหลายภาษาตั้งแต่แรกง่ายกว่าการเพิ่ม localization ทีหลังมาก หลักการสำคัญที่สุดคือแยกเนื้อหาออกจากโครงสร้าง

component variant เป็นวิธีที่มีพลังในการจัดการความแตกต่างตาม locale

การ externalize string เป็นแนวปฏิบัติจากวิศวกรรมซอฟต์แวร์ที่ใช้ได้ดีในงานออกแบบ เก็บ string ในรูปแบบ JSON แล้วใช้ปลั๊กอินดึงเข้า Figma

สร้าง QA checklist สำหรับรันหลังทุกรอบการแปล ครอบคลุมการตัดคำ overflow font fallback การกลับด้าน RTL และรูปแบบวันที่และตัวเลข

• ออกแบบ component โดยคำนึงถึงข้อความที่มีความยาวแปรผันตั้งแต่วันแรก
• สร้าง variant LTR และ RTL สำหรับ navigation card และ list item
• เก็บ string UI ภายนอกใน JSON หรือ CSV แล้ว sync เข้า Figma ด้วย content plugin
• รัน QA checklist ของ localization หลังทุกรอบการแปล
• บันทึก override ของ spacing และขนาดฟอนต์ตาม locale ใน design system

เมื่อปลั๊กอินไม่เพียงพอ

ปลั๊กอินแปลภาษาเก่งเรื่องความเร็วแต่มีข้อจำกัด การแปลอัตโนมัติทำงานได้ดีกับ string UI สั้น ๆ แต่มีปัญหากับ marketing copy และข้อความทางกฎหมาย

สำหรับความต้องการ localization ที่ซับซ้อน ให้พิจารณาเชื่อมต่อ Figma กับระบบจัดการการแปล Crowdin, Lokalise และ Phrase มีปลั๊กอิน Figma

การเชื่อมต่อ CMS เป็นอีกสถานการณ์ที่ปลั๊กอินอย่างเดียวไม่พอ ไฟล์ออกแบบและ CMS ต้อง sync กัน

รู้ว่าเมื่อไหร่ควรจ้างนักแปลมืออาชีพ เจ้าของภาษาจะจับ nuance ทางวัฒนธรรมและสำนวนที่เครื่องจักรไม่สามารถจัดการได้

• ใช้การแปลอัตโนมัติสำหรับ string UI สั้น ๆ ที่ชัดเจน
• ส่ง marketing copy และข้อความกฎหมายให้นักแปลมืออาชีพ
• เชื่อมต่อ Figma กับระบบจัดการการแปลสำหรับโปรเจกต์ที่มีภาษาเป้าหมายมากกว่าสามภาษา
• ใช้ CMS เป็นแหล่งความจริงเดียวสำหรับเนื้อหา
• จัดสรรงบประมาณสำหรับการรีวิวโดยเจ้าของภาษาในทุก locale ก่อนเปิดตัว