ปัญหาที่เจอกันแทบทุกทีม product คือดีไซน์กับโค้ดไม่เคยตรงกัน 100%
ฝั่ง Designer ทำ component สวยเป๊ะใน Figma
ส่วนฝั่ง Developer ต้องไป setup theme หรือสร้าง component เองใน codebase
ผลลัพธ์คือดีไซน์กับโค้ด “ต่างคนต่างอยู่” ทั้งที่ควรจะเป็นของเดียวกัน
เครื่องมืออย่าง Zeplin, Avocode หรือ Storybook ก็ช่วยได้บ้าง
แต่ทั้งหมดนั้นยังเป็น “ของแถมจากภายนอก” — ไม่ได้อยู่ใน Figma เอง
จนกระทั่ง Figma เปิดตัวสิ่งที่ชื่อว่า Code Connect
ซึ่งอาจพูดได้เลยว่าเป็นก้าวใหญ่ที่สุดของ Dev Mode ที่เคยมีมา
Figma Code Connect คืออะไร
Figma Code Connect เป็นฟีเจอร์ใน Dev Mode ที่ให้ Designer ผูก (map) คอมโพเนนต์ใน Figma เข้ากับโค้ดจริงใน repository ของทีม เช่น GitHub, GitLab หรือ Bitbucket ได้โดยตรง
มันไม่ใช่แค่การ inspect เหมือนเดิมที่เห็นเพียง CSS หรือ property
แต่เป็นการ “เชื่อม” ดีไซน์เข้ากับโค้ดจริงที่ใช้ใน production
พูดง่าย ๆ คือ Designer ดู component ใน Figma แล้วเห็นโค้ดจริงที่ทีม Dev ใช้อยู่ได้เลย
| Figma Component | Code Component |
|---|---|
| Button / Primary | Button.tsx |
| Input / Text Field | Input.vue |
| Card Layout | Card.jsx |
import { connect } from "@figma/code-connect";
connect(Button, "figma.com/file/XXXX#Component=YYY", {
props: {
variant: { type: "string", options: ["primary", "secondary"] },
disabled: "boolean",
},
example: `
<Button variant="primary">Submit</Button>
`,
});
แค่เขียน mapping แบบนี้ไว้ใน repo
Figma ก็จะดึงโค้ดจริงมาแสดงใน Dev Mode ได้ทันที
และเมื่อโค้ดใน repo มีการอัปเดต ข้อมูลใน Figma ก็จะอัปเดตตามอัตโนมัติ
ทั้งหมดนี้เป็นฟีเจอร์ built-in ใน Figma
ไม่ต้องลงปลั๊กอินเพิ่ม และไม่ต้อง sync ผ่าน third-party tools อีกต่อไป
ทำไมมันสำคัญ
- ลดช่องว่างระหว่าง Design และ Dev — ดีไซน์กับโค้ดพูดภาษาเดียวกัน
- ลด Human Error — ไม่ต้อง copy/paste code snippet เอง
- เร็วขึ้น — Developer เห็นโค้ดจริงพร้อม context ของดีไซน์
- เหมาะกับทีมที่ใช้ Design System — คุมคุณภาพและความสม่ำเสมอของ UI ได้ทั้งระบบ
และเพราะมันเป็น native feature ของ Figma
ทุกการอัปเดตของ component ในดีไซน์
จะสะท้อนถึงโค้ดได้อย่างแม่นยำแบบ real-time
Code Connect UI
หนึ่งในจุดแข็งของ Figma Code Connect คือส่วนติดต่อผู้ใช้ หรือ Code Connect UI
ซึ่งถูกออกแบบมาให้ทุกอย่างทำงานได้ ภายใน Figma โดยตรง
ไม่ต้องสลับหน้าจอไปมาระหว่างดีไซน์กับระบบจัดการโค้ดอีกต่อไป
Code Connect UI ช่วยให้ Designer และ Developer
สามารถเชื่อมโยงคอมโพเนนต์ใน Figma Library เข้ากับโค้ดคอมโพเนนต์จริงใน codebase ได้ง่ายและแม่นยำขึ้น
ภายใน UI นี้ ผู้ใช้สามารถ
- เลือกคอมโพเนนต์จาก Figma library ที่ต้องการเชื่อม
- ระบุ repository และ path ของไฟล์ใน GitHub ที่ตรงกัน
- ดูตัวอย่างโค้ดจริงและ mapping context ได้แบบ real-time
เบื้องหลัง Code Connect UI มีการเชื่อมต่อโดยตรงกับ GitHub repository
เพื่อให้ระบบสามารถเข้าถึงข้อมูลจริงของคอมโพเนนต์ใน codebase
และเมื่อรวมเข้ากับ MCP (Model Context Protocol)
ข้อมูลเหล่านี้จะช่วยให้ AI Agent เข้าใจรายละเอียดการ implement ได้แม่นยำมากขึ้น
เช่น การรู้ว่า Button ในดีไซน์หมายถึง component ไหนในโค้ดจริง
รวมถึง props และ usage ที่เกี่ยวข้อง
กล่าวได้ว่า Code Connect UI คือ “จุดบรรจบ” ระหว่างดีไซน์ โค้ด และ AI —
ทำให้ระบบทั้งหมดพูดภาษาเดียวกัน และเข้าใจบริบทของ product ได้ในระดับเดียวกับทีมมนุษย์
เมื่อ Developer เริ่มใช้ AI เขียนโค้ดมากขึ้น
ปัจจุบัน Developer เริ่มใช้ AI เขียนโค้ดมากขึ้น
ไม่ว่าจะเป็น GitHub Copilot, ChatGPT หรือระบบที่รองรับ MCP (Model Context Protocol)
ซึ่งช่วยให้ AI เข้าใจบริบทของโค้ดในโปรเจกต์ได้ลึกขึ้นกว่าเดิม
สิ่งที่น่าสนใจคือ หาก Figma Code Connect ช่วยให้ “ดีไซน์เข้าใจโค้ด”
AI ก็จะเข้าใจดีไซน์ไปพร้อมกันด้วย
เพราะเมื่อคอมโพเนนต์ใน Figma ผูกกับคอมโพเนนต์ในโค้ด
AI ก็จะสามารถอ้างอิงดีไซน์จริงจาก Figma มาสร้างหรือแก้ไขโค้ดได้โดยตรง
พูดอีกแบบคือ เรากำลังเข้าใกล้จุดที่
“การลากวางใน Figma คือการเขียนโค้ดไปพร้อมกัน”
สรุป
Figma Code Connect คือการเปลี่ยน Figma จากเครื่องมือดีไซน์
ให้กลายเป็น “ศูนย์กลางของ Design-to-Code workflow”
มันช่วยให้ทั้ง Designer, Developer และแม้แต่ AI
เข้าใจสิ่งเดียวกัน — จากแหล่งเดียวกัน
และนี่อาจเป็นครั้งแรกที่เราพูดได้เต็มปากว่า
Design = Code
แบบไม่ได้แค่พูดเล่นอีกต่อไป
