วันนี้เมื่อสามปีก่อน Figma เปิดตัว Dev Mode บนเวที Config 2023 ตอนนั้นไม่มีใครรู้หรอกว่ามันคือจุดเริ่มต้นของทุกอย่างที่เรากำลังคุยกันอยู่ทุกวันนี้
.
ย้อนกลับไปก่อนหน้านั้น ความสัมพันธ์ระหว่าง designer กับ dev มันคือการส่งของข้ามกำแพง designer ทำงานเสร็จก็ export ภาพ เขียนสเปคแปะไว้ ส่งไฟล์ให้ dev แล้วก็ภาวนาว่า dev จะเข้าใจตรงกัน dev เองก็ต้องนั่งเดาว่า spacing ตรงนี้กี่ pixel สีนี้ค่าอะไรกันแน่ มีอะไรเปลี่ยนไปจากรอบที่แล้วบ้าง สองฝั่งทำงานในโลกคนละใบ พูดกันคนละภาษา
.
Dev Mode เข้ามาเปลี่ยนตรงนั้น มันทำให้ Figma กลายเป็นเหมือน inspector ของ browser ที่ dev เปิดเข้ามาดู layer ดู token ดูค่าจริงได้เลยในไฟล์เดียวกับที่ designer ทำงาน ไม่ต้องส่งไฟล์ไปมา ไม่ต้องไล่ถามทาง chat แต่สิ่งที่สำคัญกว่า Dev Mode ในวันนั้น คือของอีกตัวที่ออกมาพร้อมกันในวันเดียวกันเป๊ะ นั่นคือ Variables ซึ่งก็คือระบบ token ของ Figma นั่นเอง
.
ลองคิดดูดีๆ นี่คือครั้งแรกที่ Figma พูดเรื่องการเชื่อม design เข้ากับภาษาของ code อย่างเป็นเรื่องเป็นราว token ที่เคยเป็นแค่ตัวเลขในหัว designer กลายเป็นค่าที่มีชื่อ มี mode สลับ light dark ได้ มี API ให้ดึงออกไปใช้ที่อื่นได้ วันนั้นคือวันที่ design กับ code เริ่มพูดภาษาเดียวกันจริงๆ
.
แล้วถ้าลากเส้นจากวันนั้นมาถึงวันนี้ เราจะเห็นว่ามันเป็นเส้นเดียวที่ค่อยๆ เดินหน้ามาตลอดสามปี
.
จาก Dev Mode ที่ทำให้ dev อ่าน design ออก ก็มาถึง Code Connect ที่ผูก component ใน Figma เข้ากับโค้ดจริงในโปรเจกต์ จากนั้นก็มาถึง MCP ที่เปิดให้ AI agent อย่าง Claude เข้ามาอ่าน context ในไฟล์ได้โดยตรง และมาถึงวันนี้ที่ Figma มี agent ของตัวเองอยู่บน canvas ค้นเว็บได้ ติด citation ให้ตรวจได้ ส่วน Claude Design ก็ import design system ของเราเข้าไปแล้ว build ด้วย component จริงพร้อมเช็คงานตัวเองก่อนส่งให้เราดู
.
มองเผินๆ เหมือนเป็นข่าวเครื่องมือใหม่คนละชิ้น แต่จริงๆ มันคือเรื่องเดียวกันที่เล่าต่อกันมาสามปี คือเรื่องของการที่ design กับ code ค่อยๆ ขยับเข้าหากันจนเส้นแบ่งมันบางลงเรื่อยๆ Dev Mode เริ่มจากทำให้ design อ่านออกสำหรับคน แล้วทุกอย่างหลังจากนั้นคือการขยายสะพานนั้นให้กว้างขึ้น จนวันนี้ AI เดินข้ามสะพานนั้นได้เองแล้ว
.
และนี่แหละคือสิ่งที่แอดอยากให้คิดต่อ ตลอดสามปีนี้สิ่งที่อยู่ตรงกลางสะพานมาตลอด ไม่เคยเปลี่ยน คือ design system token ที่มีโครงสร้าง component ที่มีระบบ เอกสารที่เขียนไว้ชัด สมัย Dev Mode มันช่วยให้ dev ทำงานเร็วขึ้น พอมายุค AI มันกลายเป็นสิ่งที่ตัดสินว่า agent จะทำงานแม่นหรือมั่ว เครื่องมือเปลี่ยนไปกี่รุ่นก็ตาม คนที่ลงทุนทำ design system ของตัวเองให้แข็งแรงตั้งแต่วันนั้น คือคนที่ได้เปรียบในทุกยุคที่ตามมา
.
สามปีที่แล้วเราตื่นเต้นกันว่า dev จะอ่าน design ของเราได้ วันนี้เรากำลังสอน AI ให้อ่าน design ของเราเป็น เครื่องมือไปไกลมาก แต่หัวใจยังเป็นเรื่องเดิม ใครเตรียมระบบของตัวเองไว้ดี คนนั้นไปต่อได้ไกลกว่าเสมอ
.
แอดแมว ลิงก์งาน config 2023 (dev mode): https://www.youtube.com/watch?v=yI9QVwkk2Go&t=2681s
.
#DesignLazyyy #Figma #DevMode #DesignSystem #DesignTokens #DesignToCode #UXUI