{"collectionById":{"d4a5b68c-8afd-4bbe-a7ac-e9a8422fedde":{"id":"d4a5b68c-8afd-4bbe-a7ac-e9a8422fedde","name":"Blog Articles","fieldSchemas":[{"id":"402ba26f-8f6d-4f5f-bf20-62e6549f4ad4","name":"Slug","type":"slug","role":"slug"},{"id":"1f58afa6-2748-4188-b4a4-f1e54e37eca9","name":"Hero Image","type":"image"},{"id":"3084d9ba-ab55-4e5a-931b-b9db3d09105f","name":"Article Content","type":"rich_text"},{"id":"f2ba59b9-49cc-4ec6-9416-bda99d4c8383","name":"Title","type":"plain_text","role":"primary"},{"id":"b7712ee6-f9fd-4781-8c5c-e7e10ce8f81e","name":"Publish Date","type":"date"}],"itemById":{"57caab61-f50a-4ae7-9363-fbc0b8fc005b":{"id":"57caab61-f50a-4ae7-9363-fbc0b8fc005b","index":"~ONO","collectionId":"d4a5b68c-8afd-4bbe-a7ac-e9a8422fedde","fields":[{"id":"09051d61-8ab7-40c9-8a2d-205047ef005f","value":"เปิดตัว Figma Make Kits และ Make Attachment อย่างเฉียบ!","itemId":"57caab61-f50a-4ae7-9363-fbc0b8fc005b","fieldSchemaId":"f2ba59b9-49cc-4ec6-9416-bda99d4c8383"},{"id":"f631730e-3bd6-4413-a7d1-ab4590cbbfb9","value":"{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Table Of Content\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h3\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"ปัญหาจริงของ AI-Generated UI\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Make Kits: ยัด Design System เข้าไปตั้งแต่ต้น\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Make Attachments: ใช้ข้อมูลจริงแทน Placeholder\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Key Takeaway\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"ปัญหาจริงของ AI-Generated UI\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h3\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"ปัจจุบัน AI สร้าง UI ได้เร็วมาก แต่สิ่งที่ได้มาจะพบว่า components ไม่ตรงกับ codebase, ข้อความเป็น placeholder ทั้งหมด, และ edge cases สำคัญๆ ก็หายไป\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"ปัญหาไม่ได้อยู่ที่คุณภาพของ draft แต่อยู่ที่ว่า draft นั้นไม่รู้จัก context ที่ทีมใช้จริงในงาน สิ่งที่ตามมาคือต้องนั่ง rewrite ซ้ำแทนที่จะ refine ต่อได้เลย ทำให้เสียเวลา\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"นี่คือสิ่งที่ Figma พยายามแก้ด้วย Make Kits และ Make Attachments\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Make Kits: ยัด Design System เข้าไปตั้งแต่ต้น ⚡\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h3\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Make Kits คือวิธีที่ให้ทีม design system สร้าง \\\"ชุดคู่มือ\\\" สำหรับ Make โดยเฉพาะ — รวม components และ styles จาก library เข้ากับ guidelines ที่บอกว่าควรใช้ยังไง\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"พอใช้ Make Kits ตัว Make จะเริ่มต้นด้วย components ที่ตรงกับ production ทันที ไม่ต้องมานั่ง align โครงสร้างทีหลัง\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"ยิ่งนิยามชัดว่าแต่ละชิ้นส่วนใช้งานยังไง ผลที่ได้ก็ยิ่งแม่นขึ้น ที่เห็นผลชัดสุดคือพวก shared surfaces อย่าง forms, dashboards, settings หรือ onboarding flows ที่หลายทีมต้องใช้ร่วมกัน — ทำให้มีความ consistent ขึ้น และเสียเวลาในการ review น้อยลง\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"และเวลาที่ต้องเสียไปกับการ fix context ก่อน review ก็น้อยลงชัดเจน\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Make Attachments: ข้อมูลจริงแทน Placeholder 🎯\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h3\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Make Attachments แก้อีกปัญหาหนึ่ง — แทนที่จะต้องพิมพ์สรุป context ทั้งหมดลงใน prompt ก็แค่แนบต้นฉบับมาเลย ไม่ว่าจะเป็น PDF, dataset, screenshot หรืออื่นๆ แล้วปล่อยให้ Make ไป reference โดยตรง\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"ผลที่ได้คือข้อมูลจริงทำให้เห็น layout constraints และ edge cases ตั้งแต่ต้น ตัว prototype ที่ได้เลยเป็น working draft จริงๆ ไม่ใช่แค่ภาพประกอบที่ข้อมูลยังว่างเปล่า\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"นอกจากนั้นยังเอาไปใช้กับงานประจำวันได้ด้วย — แนบ brand guidelines, tone-of-voice docs, screenshots ของ surface เดิม หรือ real data เข้ามาแทน placeholder สิ่งที่ stakeholders เห็นก็เลยใกล้เคียงกับสิ่งที่จะ ship จริงมากขึ้น ตัดสินใจได้เร็วขึ้น\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Key Takeaway\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h3\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"สองฟีเจอร์นี้ไม่ได้ทำให้ AI เก่งขึ้น — แค่ให้ AI มี context ที่ถูกต้องตั้งแต่เริ่ม\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Make Kits ดูแลเรื่อง design system context, Make Attachments ดูแลเรื่อง project context รวมกันแล้วทำให้ output ที่ได้ไม่ต้องผ่านการ rewrite รอบใหญ่ก่อนถึง review\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"pattern นี้ชัดขึ้นเรื่อยๆ — AI generate เร็วได้อยู่แล้ว แต่คุณภาพขึ้นอยู่กับ context ที่ใส่เข้าไป ยิ่ง context ตรงและครบ ยิ่ง draft ที่ได้นำไปต่อได้เลยโดยไม่ต้องแก้มาก\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"PS. Make Kits มี \",\"type\":\"text\",\"version\":1},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"detailed guidelines\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"link\",\"version\":1,\"rel\":\"noopener nofollow\",\"target\":\"_blank\",\"title\":null,\"url\":\"https://developers.figma.com/docs/code/write-design-system-guidelines/\"},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" สำหรับสอน Make ว่าใช้ component แต่ละตัวยังไง — ควรค่าแก่ทีมที่กำลังจะ scale design system ในการศึกษาข้อมูล\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"References\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Build with more context and more control in Figma Make\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"link\",\"version\":1,\"rel\":\"noreferrer\",\"target\":null,\"title\":null,\"url\":\"https://www.figma.com/blog/introducing-make-kits-and-make-attachments/\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}","itemId":"57caab61-f50a-4ae7-9363-fbc0b8fc005b","fieldSchemaId":"3084d9ba-ab55-4e5a-931b-b9db3d09105f"},{"id":"9f995c00-3483-4278-91f7-8ae7c6b3574c","value":"{\"image\":\"b9083ee1b12b5209c736f404b6d189cdb796a5e1\",\"imageThumbnail\":\"632a7d9e61feecf1b09e9a22eb326ec1841f1dcd\",\"originalImageHeight\":700,\"originalImageWidth\":1280,\"altText\":\"figma-make-kits-make-attachment.png\",\"fileName\":\"figma-make-kits-make-attachment.png\"}","itemId":"57caab61-f50a-4ae7-9363-fbc0b8fc005b","fieldSchemaId":"1f58afa6-2748-4188-b4a4-f1e54e37eca9"},{"id":"84297805-1f7f-4b3c-a87e-bc5664ccedd2","value":"2026-04-07","itemId":"57caab61-f50a-4ae7-9363-fbc0b8fc005b","fieldSchemaId":"b7712ee6-f9fd-4781-8c5c-e7e10ce8f81e"}]}}}},"slugByItemId":{"57caab61-f50a-4ae7-9363-fbc0b8fc005b":"figma-make-kits-make-attachment","7c10a08b-d604-4d4d-a009-2400c53b6b59":"introduction-to-figma-make"}}