Poppa: Figma and code, always in sync.Figma กับโค้ด ตรงกันตลอดเวลา

Poppa is 7 Solutions' own app for running, virtual challenges and everyday activities: find what fits your time and interests, track your progress, join alone or bring friends, and keep going without pressure or competition. It's how NokPlus, the LotteryPlus app, grows from customers into a community. The team's new design system existed only in Figma. Developers read values off it and typed them into code, which is how the drift started. People who don't use Figma couldn't find their way around it, and AI tools asked to build a screen guessed. An earlier catalogue had been turned down because it documented the old, code-first system. So this one starts from Figma, and treats it as the source. The system in Figma is the team's UX/UI designer's; my part was everything from there to code, built in the real repo without touching Figma.Poppa คือแอปของ 7 Solutions เอง สำหรับการวิ่ง ชาเลนจ์เสมือนจริง และกิจกรรมไลฟ์สไตล์ ช่วยหากิจกรรมที่เข้ากับเวลาและความสนใจ ติดตามความก้าวหน้า ทำคนเดียวหรือชวนเพื่อน และไปต่อได้โดยไม่ต้องกดดันหรือแข่งกับใคร เป็นทางที่นกพลัส (แอปของลอตเตอรี่พลัส) ขยายจากลูกค้าไปสู่คอมมูนิตี้ ดีไซน์ซิสเต็มใหม่ของทีมมีอยู่แค่ใน Figma นักพัฒนาอ่านค่าแล้วพิมพ์ลงโค้ดเอง ซึ่งคือจุดที่ทุกอย่างเริ่มเพี้ยน คนที่ไม่ได้ใช้ Figma หาของในไฟล์ไม่เจอ และเครื่องมือ AI ที่ถูกสั่งให้ทำหน้าจอก็เดาเอา แคตตาล็อกชุดก่อนถูกปัดตกเพราะไปบันทึกระบบเก่าที่เริ่มจากโค้ด ชุดนี้จึงเริ่มจาก Figma และถือ Figma เป็นต้นทาง ระบบใน Figma เป็นงานของนักออกแบบ UX/UI ในทีม ส่วนของผมคือทุกอย่างจากตรงนั้นไปถึงโค้ด ทำในโค้ดจริงของโปรเจกต์โดยไม่แตะ Figma

Figma's variables and styles are exported exactly as they are, and everything else is made from that one export: the tokens designers review, the values the app uses, and the catalogue the site shows. Nobody types a value by hand any more. Six checks keep it honest (an export edited by hand, the app's values out of step, a value the site shows that the tokens don't, a component that no longer matches its Figma layers), and each one was tested by breaking it on purpose.ตัวแปรและสไตล์ใน Figma ถูก export ออกมาตามที่เป็นจริง แล้วทุกอย่างที่เหลือสร้างจากไฟล์นั้นไฟล์เดียว ทั้ง token ที่ดีไซเนอร์รีวิว ค่าที่แอปใช้ และแคตตาล็อกที่เว็บแสดง ไม่มีใครต้องพิมพ์ค่าเองอีก มีด่านตรวจ 6 ด่านคุมทั้งเส้น ทั้งไฟล์ export ที่ถูกแก้ด้วยมือ ค่าในแอปที่ไม่ตรง ค่าที่เว็บแสดงแต่ไม่มีใน token และคอมโพเนนต์ที่ไม่ตรงกับ layer ใน Figma แต่ละด่านทดสอบแล้วว่าจับได้เมื่อจงใจแก้ให้ผิด

Because the site draws the file exactly as it is, it shows what a review by eye misses. The brand orange, and white text on it, fail text contrast on every primary button and link. Placeholder text is too faint on filled inputs; the Danger button's label fails too. Buttons have no focus, hover or loading state; some controls sit under the 44-pixel touch target. Nothing was quietly fixed in code: each finding went to Design to decide.เพราะเว็บแสดงไฟล์ตามที่เป็นจริงทุกอย่าง จึงเห็นสิ่งที่การรีวิวด้วยตาพลาด สีส้มแบรนด์และตัวอักษรสีขาวบนสีส้ม contrast ไม่ผ่าน ทั้งปุ่มหลักและลิงก์ทุกจุด ข้อความ placeholder จางเกินไปในช่องกรอก ป้ายบนปุ่ม Danger ก็ไม่ผ่าน ปุ่มไม่มี state focus, hover และ loading บางคอนโทรลเล็กกว่าพื้นที่แตะ 44 พิกเซล ไม่มีอะไรถูกแก้เงียบ ๆ ในโค้ด ทุกข้อส่งให้ทีมดีไซน์ตัดสิน

PM and PO read where the system stands in plain words. Designers pick a token by answering what it's for, one question at a time. Developers get the exact name to write, the same one they see in Figma's Dev Mode. AI tools get one setup prompt with the same rules: use these tokens, never a raw value, and ask when a token is missing. All of it in Thai and English, Light and Dark.PM และ PO อ่านสถานะของระบบเป็นภาษาคน ดีไซเนอร์เลือก token ด้วยการตอบว่าจะใช้ทำอะไรทีละคำถาม นักพัฒนาได้ชื่อที่ต้องเขียนเป๊ะ ๆ ตรงกับที่เห็นใน Dev Mode ของ Figma เครื่องมือ AI ได้ prompt ตั้งค่าชุดเดียวที่มีกฎเดียวกัน: ใช้ token เหล่านี้ ห้ามใส่ค่าเอง ถ้าไม่มี token ให้ถาม ทั้งหมดมีไทยและอังกฤษ สว่างและมืด

These aren't screens I designed: they're here because they're drawn from the system. Figma's export sits next to the code made from it, so a change on either side shows up as a before-and-after, and each one goes to the developers to review. Every component variant is compared with Figma (its structure, tokens, Light and Dark values and size), and any difference nobody approved is flagged. And the work only adds, so the live app stays as it is while it moves onto the system.หน้าจอเหล่านี้ไม่ได้ออกแบบโดยผม ที่เอามาโชว์เพราะมันวาดจากระบบ ไฟล์ export ของ Figma อยู่คู่กับโค้ดที่สร้างจากมัน ไม่ว่าแก้ฝั่งไหน ก็เห็นก่อนและหลังเทียบกัน และทุกการแก้ส่งให้นักพัฒนารีวิวก่อน ทุก variant ของคอมโพเนนต์ถูกเทียบกับ Figma ทั้งโครงสร้าง token ค่าสว่างและมืด และขนาด ถ้าต่างโดยไม่มีใครอนุมัติ ระบบจะแจ้งทันที และงานนี้เป็นการเพิ่มอย่างเดียว แอปจริงจึงยังเหมือนเดิมระหว่างที่ทยอยย้ายมาใช้ระบบ