วิธีการใช้งาน Design System บน Figma เพื่อการออกแบบ Prototype สำหรับโครงการต่างๆ

1. เข้าไปที่ Figma Master File ด้วยลิ้งก์นี้ https://www.figma.com/file/b6ACnlnRiKco3uI26HQTxV/%F0%9F%92%A1GISC—Design-System-v1.0?type=design&t=Q5QHpenJmrNwDjIT-6
2. คลิกที่ปุ่มลูกศรหลังชื่อไฟล์ GISC – Design System v1.0 จากนั้นคลิกที่ Duplicate to your drafts เพื่อทำสำเนาไฟล์มาไว้สร้างเป็น Prototype ของโครงการ

3. ไปยังไฟล์ Figma ที่ Duplicate มาแล้ว ที่แถบเมนูด้านซ้าย คลิกที่ปุ่มเครื่องหมายบวกหลังคำว่า Pages เพื่อสร้างหน้าใหม่

4. ทำการสร้าง Frame เพื่อใช้เป็นหน้าต่างๆ ของ Prototype โดยการคลิกที่เมนู Region Tools > Frame จากนั้นเลือกขนาดของหน้าจอที่ต้องการ

5. การเพิ่ม Component สำเร็จรูปต่างๆ ที่มีให้ใช้ใน GISC Design System สามารถทำได้โดยการคลิกที่เมนู Resource จากนั้นภายใต้แท็บ Components ให้เลือก Component ที่คุณต้องการเพิ่มลงไปยัง Frame

6. คุณสามารถปรับแต่งสี ตำแหน่ง ขนาด รูปแบบ และอื่นๆ ของ Component ได้จากแถบเมนูทางด้านขวา