AI ทำงานหลุด CI? สอนใส่กฎแบรนด์ให้ Figma Agent ด้วย Guidelines

สั่ง AI ทำงานแล้วสีหลุด ฟอนต์ไม่ใช่ โลโก้ผิดตำแหน่ง? ก่อนเพิ่มคำสั่งให้ยาวกว่าเดิม ลองให้มันรู้กติกาของแบรนด์ก่อนครับ เพราะคำว่า “ทำให้สวย” ยังไม่บอกว่าแบรนด์เรายอมรับแบบไหน

วันที่ 6 ตุลาคม 2569 Figma ประกาศว่า Figma Agent พ้นเบตา พร้อมความสามารถด้านบริบทและการทำงานร่วมกันที่เพิ่มขึ้น หนึ่งเรื่องที่น่าสนใจสำหรับทีมดีไซน์คือการแนบ Guidelines ให้ไลบรารี เพื่อให้ผู้ช่วยรู้วิธีใช้ระบบงานของทีม อ่านประกาศ Figma

Guidelines คือกติกาที่ AI ใช้อ้างอิง

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

นี่คือการเพิ่มบริบทระหว่างทำงาน ไม่ใช่การฝึกโมเดลใหม่หรือรับประกันว่างานจะถูกทุกครั้ง และเมนูในบทความนี้เป็นของ Figma Design Library ซึ่งต่างจาก Guidelines ภายใน Figma Make

ก่อนอัปโหลด เตรียมกฎที่ใช้งานจริง

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

• สี: ระบุสีหลัก สีข้อความ และสีพื้นหลัง พร้อมอธิบายหน้าที่ของแต่ละสี ถ้ามี Variables อยู่แล้วให้ใช้ชื่อจริงจากไฟล์
• ตัวอักษร: ระบุฟอนต์ที่มีสิทธิ์ใช้งาน ขนาดและน้ำหนักที่เลือกสำหรับหัวเรื่องกับเนื้อหา รวมถึงวิธีจัดการสระและวรรณยุกต์ไทย
• องค์ประกอบ: บอกว่าจะใช้ Component ใดกับงานแบบไหน รวมทั้งระยะห่างและพื้นที่รอบโลโก้
• สิ่งที่ห้าม: ยกกรณีที่เคยผิดจริง เช่น ยืดโลโก้ เพิ่มสีที่ไม่อยู่ในชุด หรือแต่งข้อความโปรโมชันขึ้นเอง

เพิ่ม Guidelines ใน Figma Design

ฟีเจอร์นี้รองรับแพลน Professional, Organization และ Enterprise และผู้เพิ่มกฎต้องมีสิทธิ์แก้ไขไฟล์ ตรวจแพลนและสิทธิ์ของบัญชีตัวเองก่อนเริ่มครับ

1. เปิดไฟล์ Figma Design ที่เป็นไลบรารีซึ่งเผยแพร่แล้ว
2. เปิดเมนูไฟล์ แล้วเลือก Library → Manage guidelines
3. กด Upload เลือกไฟล์ .md, .txt หรือ .json จากเครื่อง
4. กด Apply changes แล้วใช้ Agent ทำงานโดยอ้างอิงไลบรารีนั้น

ขนาดไฟล์กฎรวมสูงสุด 200 KB ส่วนคำแนะนำของ Figma คือแบ่งหัวข้อให้กระชับ ไม่เขียนข้อมูลซ้ำ เพราะบริบทที่เพิ่มขึ้นอาจใช้เครดิต AI เพิ่มด้วย ตรวจขั้นตอนและเงื่อนไขจาก Figma Help

ตัวอย่างกติกาสั้น ๆ สำหรับนำไปปรับใช้

ใช้ชุดสีและตัวอักษรที่กำหนดในไลบรารีนี้ เลือก Component ที่มีอยู่ก่อนสร้างใหม่ ห้ามยืด เปลี่ยนสัดส่วน หรือวาดโลโก้ขึ้นใหม่ หากข้อมูลข้อความหรือข้อกำหนดไม่ครบให้ถามก่อน ห้ามแต่งราคา โปรโมชัน หรือคำรับประกันขึ้นเอง

เพิ่มชื่อ Variables, Components และค่าระยะห่างจริงของทีมลงไป อย่าตั้งชื่อขึ้นมาลอย ๆ แล้วคาดหวังว่า AI จะหาเจอ ก่อนสั่งผลิตหลายแบบ ให้เริ่มจากหนึ่งชิ้นเพื่อดูว่าคู่มือยังขาดกติกาตรงไหน

ให้ AI ช่วยทำ แต่เรายังคุมงาน

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

Figma ยังยกตัวอย่างการใช้ Agent ช่วยตรวจ Component และ Variables ให้สอดคล้องกับระบบงาน รวมถึงปรับชื่อและดูแลเอกสาร แต่ทีมต้องตรวจรายการเปลี่ยนแปลงก่อนนำไปใช้ต่อ อ่านแนวทางดูแล Design System จาก Figma

ลองเริ่มวันนี้: หยิบงานเก่าที่แก้หลายรอบมา 1 ชิ้น จดข้อผิดพลาด 3 ข้อ แล้วเปลี่ยนแต่ละข้อให้เป็นกติกาที่ตรวจได้ นั่นคือจุดเริ่มต้นของคู่มือที่ช่วยให้ทั้งคนและ AI ทำงานไปทางเดียวกันครับ

กอร่าใช้ Codex สั่ง Figma ทำงานอีกทีอย่างไร

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

ภาพหลักในตัวอย่างสร้างด้วย imagegen ก่อนนำเข้า Figma ส่วนกรอบอัลบั้ม ปกเว็บ และแผนภาพขั้นตอนถูกจัดผ่านเครื่องมือ Figma ที่เชื่อมกับ Codex จริง กรอบและข้อความในแผนภาพยังแก้ไขได้ ส่วนตัวอักษรที่ติดอยู่ในภาพสำเร็จรูปยังเป็นบิตแมป

1. เชื่อม Figma ให้พร้อม: ใน Codex ที่รองรับปลั๊กอิน เปิด Plugins ค้นหา Figma แล้วเชื่อมบัญชีตามหน้าจอ เปิดแชตใหม่หลังติดตั้ง และใช้ไฟล์ที่บัญชีคุณมีสิทธิ์แก้ไข ความสามารถขึ้นกับเครื่องมือและสิทธิ์ที่เชื่อมไว้ อ่านวิธีติดตั้งและเชื่อมปลั๊กอินจาก OpenAI
2. ให้เรียนบริบทก่อน: แนบภาพ โลโก้ ข้อความ และกฎแบรนด์ บอกสิ่งที่ต้องรักษา เช่น โทนสว่าง สีส้มกับน้ำตาลเข้ม และสัดส่วนโลโก้ พร้อมกำหนดขนาดปลายทาง
3. สั่งจัดงานใน Figma: ระบุจำนวนเฟรม ขนาด ลำดับภาพ และว่าส่วนไหนต้องแก้ไขเป็นข้อความได้ ถ้าใช้ภาพสำเร็จรูปให้บอกตรง ๆ ว่านำมาวางเป็นภาพ ไม่ได้แปลงตัวหนังสือทั้งหมดเป็นเลเยอร์
4. ตรวจจากภาพจริงแล้วสั่งแก้: เปิดภาพที่ส่งออก ดูบนมือถือและขนาดจริง ตรวจภาษาไทย โลโก้ และขอบภาพ ตัวอย่างครั้งนี้แก้สระอุเกินใต้ ล ในคำว่า “แล้ว” ก่อนนำภาพใหม่ไปแทนในอัลบั้ม
5. ส่งออกให้เหมาะกับที่ใช้: อัลบั้มใช้ 1080 × 1350 พิกเซล ปกเว็บใช้ 1600 × 900 พิกเซล ตรวจขนาดไฟล์ให้ไม่เกิน 2 MB และใส่ชื่อไฟล์ คำอธิบายภาพกับ alt text ที่ตรงเนื้อหา

คำสั่งเริ่มต้นที่นำไปปรับใช้ได้

ใช้ Figma จัดอัลบั้มจากภาพและโลโก้ที่แนบมา 4 เฟรม ขนาด 1080 × 1350 พิกเซล เรียงตามไฟล์ 01–04 และทำปกเว็บ 1600 × 900 พิกเซล ใช้โทนสว่าง สีส้มกับน้ำตาลเข้ม รักษาสัดส่วนโลโก้ ไม่เพิ่มข้อความเอง สร้างแผนภาพขั้นตอนแยกอีก 1 เฟรมโดยให้ข้อความแก้ไขได้ ส่งภาพพรีวิวมาให้ตรวจก่อนส่งออก

คำสั่งแก้ไขที่ชัดเจน: “ภาพที่ 4 เอาสระอุเกินใต้ ล ในคำว่า ‘แล้ว’ ออก รักษาตำแหน่ง รูปภาพ และข้อความอื่นทั้งหมด แล้วส่งพรีวิวจุดที่แก้มาให้ดู”

การเชื่อม Codex กับ Figma ในตัวอย่างนี้เป็นคนละขั้นตอนกับฟีเจอร์ Library Guidelines ของ Figma Agent ที่อธิบายข้างต้น การจัดเฟรมผ่านปลั๊กอินไม่ได้แปลว่าบัญชีเปิดใช้ Library Guidelines แล้ว ให้ตรวจแพลนและสิทธิ์ของฟีเจอร์นั้นแยกกันครับ

เรียบเรียงโดย Gorra Design • ตรวจเอกสาร 13 ตุลาคม 2569 • เพิ่มขั้นตอน Codex → Figma 14 ตุลาคม 2569 • บทความข่าวพร้อมแนวทางประยุกต์ ไม่ใช่รายงานผลทดสอบ Figma Agent ของกอร่า ภาพในอัลบั้มใช้แสดงแนวคิดและลำดับงาน สิทธิ์และเครดิตอาจเปลี่ยนตามแพลน