เลเยอร์โค้ด Figma และ Specs: คืออะไร ทำงานอย่างไร และหยุดที่ใด2 min read

ชั้นโค้ด Figma วางโค้ดที่รันอยู่บนผืนผ้าใบ และ Figma Specs ก็ใส่ Markdown ไว้ที่นั่นด้วย ทั้งสองเข้าสู่รุ่นเบต้าแบบเปิดที่ Config India เมื่อวันที่ 15 ตุลาคม 2026 ดังนั้นไฟล์การออกแบบจึงสามารถเก็บเฟรม ต้นแบบการทำงาน และแผนงานเขียนที่ตัวแทนสร้างขึ้นได้

คู่มือนี้มีไว้สำหรับนักออกแบบ PM และวิศวกรส่วนหน้าที่กำลังตัดสินใจว่าจะย้ายงานต้นแบบและข้อมูลจำเพาะไปที่ Figma หรือไม่ โดยครอบคลุมถึงสิ่งที่แต่ละฟีเจอร์ทำ จะเริ่มอย่างไร ราคาเป็นเครดิต AI และตำแหน่งที่งานต้องฝาก Figma ไว้ให้เพื่อนร่วมทีมใน Claude, ChatGPT หรือ Cursor

ในยุคของ AI การออกแบบคือโค้ด หากต้องการออกแบบด้วยโค้ดโดยตรงด้วย AI หรือเปลี่ยนการออกแบบ Figma ให้เป็นโค้ด ให้ใช้ Anima Playground: อธิบายหน้าจอหรือเริ่มจากการออกแบบ Figma จากนั้นทำซ้ำในแอปที่แก้ไขได้ซึ่งคุณสามารถดูตัวอย่างและเผยแพร่ได้

ออกแบบโดยตรงในโค้ดด้วย AI

การออกแบบด้วย AI: อธิบายหน้าจอหรือเปลี่ยนการออกแบบ Figma ให้เป็นโค้ด

Figma เปิดตัวที่ Config India 2026 มีอะไรบ้าง

เลเยอร์โค้ดและ Specs เป็นพาดหัว แต่มาพร้อมกับชุดฟีเจอร์เอเจนต์รอบตัว นี่คือสถานะปัจจุบันจากศูนย์ช่วยเหลือของ Figma:

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

ชั้นโค้ด Figma คืออะไร

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

Figma ให้คุณสี่วิธีในการเริ่มต้น:

• จากการออกแบบ เลือกเฟรมและขอให้เอเจนต์ Figma เปลี่ยนเฟรมให้เป็นเลเยอร์โค้ด
• จากเว็บไซต์ถ่ายทอดสด จับภาพเพจด้วยส่วนขยาย Figma Chrome และวางลงบนผืนผ้าใบ
• จากการซื้อคืน นำเข้าฐานโค้ดการสร้างต้นแบบน้ำหนักเบาที่รองรับจาก GitHub หรือโฟลเดอร์ในเครื่อง การนำเข้า GitHub ยังคงเชื่อมต่อกับที่เก็บนั้น
• ตั้งแต่เริ่มต้น เพิ่มเลเยอร์โค้ดว่างและแจ้งให้เอเจนต์สร้าง

คุณยังสามารถนำต้นแบบที่คุณสร้างในเครื่องมือเขียนโค้ดลงบนผืนผ้าใบผ่านเซิร์ฟเวอร์ Figma MCP ได้

การแก้ไขเกิดขึ้นได้สามวิธี คุณแจ้งให้ตัวแทน ใส่คำอธิบายประกอบเฟรมเพื่อแสดงตำแหน่งของการเปลี่ยนแปลง หรือคุณเปิดโปรแกรมแก้ไขโค้ดและเปลี่ยนโค้ดด้วยตนเอง เมื่อรายละเอียดภาพมีความสำคัญมากกว่าโค้ด Extract designs เปลี่ยนหน้าจอจากเลเยอร์โค้ดกลับเป็นเฟรม Figma ที่แก้ไขได้ เมื่อโค้ดพร้อมสำหรับวิศวกร คุณสามารถพุชไปที่สาขาและเปิดคำขอดึงได้

Figma Specs คืออะไร?

Figma เรียก Specs ว่า “หน้าหลักสำหรับบริบท” ในทางปฏิบัติ เอกสารดังกล่าวเป็นเอกสาร Markdown ที่ทำงานร่วมกันซึ่งอยู่บนผืนผ้าใบของไฟล์ Figma Design หรือบอร์ด FigJam หรือเป็นไฟล์ Spec ของตัวเอง

การเริ่มต้นใช้งานนั้นรวดเร็ว:

1. สร้าง Spec แบบสแตนด์อโลนจากไฟล์เบราว์เซอร์ หรือไปที่ figma.com/spec/new.
2. ภายในไฟล์ Design หรือบอร์ด FigJam ให้คลิก Spec ในแถบเครื่องมือหรือกด ดี.
3. มีแล้ว .md ไฟล์? ลากมันไปบนผืนผ้าใบและมันก็กลายเป็นข้อมูลจำเพาะ
4. เขียนด้วย Markdown ที่คุณรู้อยู่แล้ว: # สำหรับส่วนหัว - สำหรับกระสุน [] สำหรับสิ่งที่ต้องทำ > สำหรับเครื่องหมายคำพูด สาม backticks สำหรับโค้ด ประเภท / สำหรับรูปภาพ Figma จะฝังและตัวแบ่ง

สิ่งที่ทำให้ข้อมูลจำเพาะเป็นมากกว่าไฟล์ Markdown คือสิ่งที่ล้อมรอบข้อความ คุณสามารถฝังเฟรม บอร์ด FigJam หรือโหนดใดๆ จากแคนวาสได้ เพื่อให้ข้อกำหนดและการออกแบบที่อธิบายไว้ติดกัน เพื่อนร่วมทีมแสดงความคิดเห็นเกี่ยวกับเรื่องนี้ และตัวแทน Figma สามารถอ่านและตอบกลับความคิดเห็นเหล่านั้นได้

Specs ยังทำงานภายนอก Figma ได้ด้วย เอเจนต์การเข้ารหัสที่เชื่อมต่อกับเซิร์ฟเวอร์ Figma MCP สามารถอ่าน สร้าง และอัปเดตข้อมูลจำเพาะได้โดยใช้ figma-spec ทักษะ. หากต้องการส่งต่อ คุณจะต้องคัดลอกลิงก์ข้อมูลจำเพาะลงในข้อความแจ้งของตัวแทนการเขียนโค้ด จากนั้นเฟรม ไดอะแกรม ชั้นโค้ดที่เชื่อมโยง และข้อมูลโค้ด Code Connect จะมาพร้อมกับลิงก์นั้นด้วย

เหตุใด Markdown จึงกลายเป็นรูปแบบแฮนด์ออฟ

โพสต์เปิดตัวของ Figma กล่าวอย่างชัดเจนว่า ขณะนี้ Markdown เป็นรูปแบบที่แท้จริงสำหรับการแบ่งปันบริบทกับตัวแทน ตัวแทนการเข้ารหัสทุกคนอ่านมัน ทีมผลิตภัณฑ์ส่วนใหญ่เก็บแผน PRD และคำแนะนำของตัวแทนไว้อยู่แล้ว .md ไฟล์.

การอ่านของฉันคือ Specs คือ Figma ที่ยอมรับว่าการส่งต่อให้กับตัวแทนนั้นเป็นข้อความ จากนั้นจึงทำให้ข้อความนั้นมีผู้เล่นหลายคน ท้องถิ่น AGENTS.md หรือ PRD ไม่เคยล้มเหลวเนื่องจากรูปแบบ มันล้มเหลวเพราะมีเพียงคนเดียวเท่านั้นที่แก้ไข มันหลุดออกไปจากการออกแบบ และไม่มีใครเห็นว่าตัวแทนใช้เวอร์ชันใด

ภายใน Figma นั้น Specs จะแก้ไขสิ่งนั้น คำถามเปิดคือเกิดอะไรขึ้นภายนอก การฝัง ความคิดเห็น และการอ้างอิงการออกแบบที่ใช้งานจริงเป็นคุณลักษณะของ Figma และตัวแทนจะเข้าถึงได้ผ่านไคลเอนต์ที่แสดงอยู่ในแค็ตตาล็อก Figma MCP หากวิศวกรของคุณ, ChatGPT ของ PM และ Claude ของทีมการตลาดของคุณต้องการแผนเดียวกัน คุณยังคงต้องตัดสินใจว่าสำเนาที่แชร์นั้นอยู่ที่ใด

ขั้นตอนการทำงานที่ใช้งานได้จริง: ตั้งแต่ PRD ไปจนถึงโค้ดเลเยอร์เพื่อดึงคำขอ

ต่อไปนี้คือลักษณะที่ทั้งสองคุณสมบัติเข้ากันได้ในคุณลักษณะจริง โดยใช้เฉพาะเอกสาร Figma ในปัจจุบันเท่านั้น

1. ลาก PRD ของคุณลงบนผืนผ้าใบ ที่มีอยู่ของคุณ .md ไฟล์กลายเป็นข้อมูลจำเพาะ ไม่มีการเขียนซ้ำ และการแก้ไขด้วยมือไม่ได้ใช้เครดิต AI
2. ฝังเฟรมที่มันพูดถึง ใช้ / เพื่อเพิ่มโฟลว์ที่ PRD อธิบาย ตอนนี้ผู้ตรวจสอบเห็นข้อกำหนดและหน้าจอพร้อมกัน
3. เปลี่ยนคีย์เฟรมให้เป็นเลเยอร์โค้ด เลือกพวกเขาและแจ้งตัวแทน หากคุณมีต้นแบบ repo อยู่แล้ว ให้นำเข้าจาก GitHub แทน
4. รีวิวที่เดียว รวบรวมความคิดเห็นเกี่ยวกับข้อมูลจำเพาะและเลเยอร์โค้ด ขอให้ตัวแทน Figma ตอบกลับความคิดเห็นที่เปิดอยู่แต่ละรายการพร้อมวิธีแก้ไขที่แนะนำในขณะที่ผู้คนชั่งน้ำหนักในเธรดเดียวกัน
5. ทิ้งสเป็คไว้เลย วางลิงก์ข้อมูลจำเพาะลงใน Codex, Claude Code หรือ Cursor ที่เชื่อมต่อกับเซิร์ฟเวอร์ Figma MCP เอเจนต์ได้รับ Markdown พร้อมด้วยบริบทการออกแบบที่เชื่อมโยง
6. จัดส่งรหัสต้นแบบ พุชการเปลี่ยนแปลงของชั้นโค้ดไปยังสาขาและเปิดคำขอดึงเพื่อให้วิศวกรตรวจสอบก่อนที่จะรวม

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

หากขั้นตอนต่อไปคือการเปลี่ยนการออกแบบ Figma ให้เป็นโค้ดที่คุณสามารถรันได้ หรือออกแบบในโค้ดจากพรอมต์ นั่นคืองานของ Anima Playground

ชั้นโค้ดและ Specs มีค่าใช้จ่ายเท่าไร

• ชั้นโค้ดใช้เครดิต AI สำหรับแผนแบบชำระเงิน การสร้างและแก้ไขภายในชั้นโค้ดจะไม่มีค่าใช้จ่ายจนถึงวันที่ 4 พฤศจิกายน 2026 เจ้าหน้าที่ตัวแทนอื่นๆ ที่ทำงานพร้อมท์เดียวกันยังคงใช้เครดิต และหลังจากวันที่ 4 พฤศจิกายน งานชั้นโค้ดทั้งหมดจะใช้เครดิต
• Specs มีอิสระในการเขียน การพิมพ์และแก้ไขข้อมูลจำเพาะด้วยตนเองไม่ได้ใช้เครดิต การใช้ตัวแทนที่มีสเป็คทำ เลื่อนใบเสร็จรับเงินหลังจากแต่ละข้อความแจ้งเพื่อดูว่ามีค่าใช้จ่ายเท่าใด
• Payload และแนวทางบวกค่าใช้จ่าย Figma สังเกตว่าทั้งคู่ทำให้เอเจนต์มีบริบทมากขึ้นและทำงานมากขึ้น ดังนั้นพร้อมต์เดียวกันจึงสามารถใช้เครดิตได้มากขึ้น

ข้อจำกัดในการตรวจสอบก่อนวางแผนรอบสิ่งเหล่านั้น

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

ตำแหน่งที่ Figma หยุด และตำแหน่งที่ Anima และ AgentGrid.io พอดี

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

สถานการณ์ทั่วไปสองสถานการณ์ยังคงอยู่นอกไฟล์นั้น

ความคิดเริ่มต้นจากที่อื่น ต้นแบบ Claude Design, เพจ HTML ที่สร้างโดย ChatGPT หรือไซต์จริงที่คุณต้องการเรียนรู้ ขณะนี้เซิร์ฟเวอร์ MCP ของ Figma มี html_to_figma เครื่องมือสำหรับ HTML ที่เอเจนต์สร้างขึ้น Buddy ของ Anima ซึ่งเป็นตัวแทนการออกแบบ AI ของเราใน Figma ก็เปลี่ยนโฉมเช่นกัน HTML, สิ่งประดิษฐ์ของ Claude, รูปภาพและ URL ลงในเลเยอร์ Figma ที่แก้ไขได้ซึ่งมีประโยชน์เมื่อคุณต้องการออกแบบบนเลเยอร์เหล่านั้นต่อไปด้วยระบบการออกแบบของคุณ

ผลลัพธ์ต้องออกจาก Figma ข้อมูลจำเพาะหรือต้นแบบของคุณจะต้องได้รับการตรวจสอบโดยบุคคลภายนอกทีม Figma ของคุณ แก้ไขโดยตัวแทนจากผู้ขายหลายราย หรือเผยแพร่เป็นลิงก์สด นั่นคืองานที่ AgentGrid.io ซึ่งสร้างโดย Anima ทำ อาร์ติแฟกต์ Markdown บน AgentGrid.io เป็นเอกสารบันทึกอัตโนมัติแบบสดที่ผู้คนและเอเจนต์ที่เชื่อมต่อ เช่น Claude, ChatGPT, Cursor และ Grok Bot สามารถแก้ไขได้ โดยแต่ละการเปลี่ยนแปลงจะระบุแหล่งที่มาตามชื่อในประวัติเวอร์ชัน อาร์ติแฟกต์ HTML คือเพจที่รันอยู่ซึ่งคุณสามารถแสดงความคิดเห็นและเผยแพร่ไปยัง URL สาธารณะเมื่อได้รับการอนุมัติ คุณยังสามารถนำเข้าเฟรม Figma หนึ่งเฟรมไปยัง AgentGrid.io เป็นอาร์ติแฟกต์ของแอปได้ การนำเข้านั้นเป็นแบบทางเดียว ดังนั้นการแก้ไข Figma ในภายหลังจึงไม่ซิงค์

ทั้งสองไม่ได้แข่งขันกันในขั้นตอนเดียวกัน Figma เป็นเจ้าของผืนผ้าใบการออกแบบ AgentGrid.io คือที่ที่ Markdown และอาร์ติแฟกต์ HTML จะทำงานเมื่องานข้ามเครื่องมือและทีม

ลอง AgentGrid.io เพื่อเก็บข้อมูลจำเพาะหรือต้นแบบที่เจ้าหน้าที่ทุกคนในทีมของคุณสามารถแก้ไขและเผยแพร่ได้

ใช้เครื่องมือแต่ละอย่างเมื่อ

• ใช้เลเยอร์โค้ด Figma เมื่อผู้มีส่วนได้ส่วนเสียต้องคลิกต้นแบบการทำงานถัดจากการออกแบบและเปรียบเทียบทิศทางแบบเคียงข้างกัน
• ใช้ Figma Specs เมื่อแผนควรอยู่ข้างเฟรมและเอเจนต์การเขียนโค้ดอ่านผ่านเซิร์ฟเวอร์ Figma MCP
• ใช้ Anima Playground เมื่อคุณต้องการออกแบบด้วยโค้ดโดยตรงด้วย AI หรือเปลี่ยนการออกแบบ Figma ให้เป็นแอปที่แก้ไขได้ คุณสามารถดูตัวอย่างและเผยแพร่ได้
• ใช้ Buddy เมื่อจุดเริ่มต้นอยู่นอก Figma และคุณต้องการเลเยอร์ที่แก้ไขได้บนผืนผ้าใบ สำหรับการเปรียบเทียบที่สมบูรณ์ยิ่งขึ้นของการสร้างใน Figma กับตัวสร้างเบราว์เซอร์ โปรดดู Figma Make กับ Anima Playground.
• ใช้ AgentGrid.io เมื่อบุคคลและตัวแทนต้องแก้ไขข้อมูลจำเพาะหรือต้นแบบในเครื่องมือต่างๆ ตรวจสอบพร้อมความคิดเห็น และเผยแพร่เป็นลิงก์สด

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

เลเยอร์โค้ดใน Figma คืออะไร

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

Figma Specs เป็นเพียง Markdown หรือไม่

Specs ใช้ Markdown สำหรับข้อความ และคุณสามารถลากไฟล์ .md ใดๆ ลงบนผืนผ้าใบเพื่อสร้างไฟล์ได้ โดยเพิ่มคุณสมบัติ Figma รอบๆ ข้อความนั้น: เฟรมที่ฝังและบอร์ด FigJam ความคิดเห็น และตัวแทนที่สามารถอ่านและตอบกลับความคิดเห็นเหล่านั้นได้

ชั้นโค้ด Figma ต้องใช้เครดิต AI หรือไม่

ใช่ สำหรับแผนแบบชำระเงิน การสร้างและแก้ไขภายในชั้นโค้ดจะไม่มีค่าใช้จ่ายจนถึงวันที่ 4 พฤศจิกายน 2026 เจ้าหน้าที่อื่นๆ ที่ทำงานพร้อมท์เดียวกันยังคงใช้เครดิต และหลังจากวันที่ 4 พฤศจิกายน งานชั้นโค้ดทั้งหมดจะใช้เครดิต AI

Claude Code, Codex หรือ Cursor สามารถอ่าน Figma Spec ได้หรือไม่

ใช่ หากเชื่อมต่อกับเซิร์ฟเวอร์ Figma MCP เอเจนต์การเขียนโค้ดสามารถอ่าน สร้าง และอัปเดตข้อมูลจำเพาะด้วยทักษะ figma-spec และคุณสามารถวางลิงก์ข้อมูลจำเพาะลงในพร้อมท์ของคุณเพื่อส่งต่อไปตามบริบทการออกแบบที่เชื่อมโยง

แผน Figma ใดบ้างที่มี Specs?

Specs อยู่ในเวอร์ชันเบต้าแบบเปิดสำหรับแผนแบบชำระเงิน: Professional, Organization, Enterprise และ Education รวมถึง Government ตามบทความ Config India ของ Figma มันไม่ได้อยู่ในแผนเริ่มต้นฟรี ชั้นโค้ดกำลังเปิดตัวในทุกแผน รวมถึง Starter