Component Library Structure

โครงสร้างหน้า (page) และการตั้งชื่อ component ใน Figma ต้องสะท้อนลำดับชั้น atomic เดียวกับที่อธิบายใน Design System → Principles

โครงสร้างหน้าที่แนะนำ

📄 00 — Cover & Changelog
📄 01 — Foundations        (color/type/spacing swatches — bind ตรงกับ Figma Variables)
📄 02 — Atoms               (Button, Input, Icon, Badge, Avatar)
📄 03 — Molecules           (Form Field, Search Bar, Nav Item)
📄 04 — Components          (Card, Navbar, Modal, Table)
📄 05 — Patterns            (Dashboard Layout, Checkout Flow)
📁 Archive                  (component เก่าที่เลิกใช้ — ห้ามลบทิ้ง เก็บไว้อ้างอิง)

Naming ให้ตรงกับโค้ด

ใช้ PascalCase เดียวกับชื่อ component ในโค้ดเป๊ะ ตามกฎใน Design System → Principles:

Figma Component Name	Component ในโค้ด
Button / Primary	ButtonPrimary
Card / Feature	CardFeature
Input / Text	InputText

• ใช้ Component Properties (variant, boolean, instance-swap) แทนการสร้าง component แยกทุก state — เช่น Button/Primary ควรมี property state (default/hover/disabled) ไม่ใช่ 3 component แยก
• ทุก component ต้อง bind สีและระยะห่างเข้ากับ Figma Variables จาก Figma Variables Setup — ห้ามใส่สี hex ตรงๆ ใน layer เพราะจะหลุด sync ทันทีที่ token เปลี่ยน
• Component ที่เลิกใช้ ย้ายไปหน้า Archive แทนการลบ — เพื่อไม่ให้ไฟล์ที่ instance ของ component นั้นอยู่ก่อนหน้าพัง