เริ่มต้นใช้งาน

สิ่งที่ต้องมี

• บัญชี Figma (ฟรีหรือแบบเสียเงินก็ได้)
• ติดตั้ง Roblox Studio ไว้ในเครื่องแล้ว
• สิทธิ์ HTTP: ใช้เฉพาะ Live Mode เท่านั้น Studio จะถามครั้งเดียวว่าให้ปลั๊กอิน FigBloxUI ส่ง HTTP request ได้ไหม ให้กด Allow (เปลี่ยนทีหลังได้ที่ Plugins → Manage Plugins) ไม่ต้องเปิดสวิตช์ “Allow HTTP Requests” ใน Experience Settings ส่วนโหมด ZIP และ Code ใช้ได้เลยโดยไม่ต้องมีสิทธิ์นี้

ขั้นตอนที่ 1: ติดตั้งปลั๊กอิน Figma

1. ไปที่หน้า ปลั๊กอิน FigBloxUI บน Figma
2. กด “Install”
3. ปลั๊กอินจะขึ้นในรายการปลั๊กอินของ Figma
4. เปิดปลั๊กอินแล้วกด Start Free Trial (14 Days) เพื่อเริ่มทดลองใช้ฟรี ถ้าสมัครใช้อยู่แล้ว ให้กด Login with Roblox for all modes หรือ Already have a license key? แทน

ขั้นตอนที่ 2: ติดตั้งปลั๊กอิน Roblox Studio

1. เปิดหน้า FigBloxUI บน Roblox Creator Marketplace
2. กด “Install”
3. ปลั๊กอินจะขึ้นในแถบเครื่องมือ (toolbar) ของ Studio

วิธีอัปเดตปลั๊กอิน Roblox Studio

1. ไปที่เมนู Plugins (แถบเมนูด้านบนสุด)
2. กด Manage Plugins
3. หา FigBloxUI ในรายการ
4. ติ๊กช่อง Auto Update

อัปเดตปลั๊กอินทั้งสองตัวให้เป็นเวอร์ชันล่าสุดอยู่เสมอ การส่งแบบ Live ต้องใช้ปลั๊กอิน Studio เวอร์ชัน 3.0.0 ขึ้นไป ส่วน Code และ ZIP ยังวางโค้ดบนเวอร์ชันเก่าได้ แต่ต้องเป็น 3.0.0 ทุกอย่างถึงจะทำงานครบ รวมถึง Separate และ Preserve layers ในโหมด Scaled ด้วย ถ้าอยากรู้ว่าตอนนี้ใช้เวอร์ชันไหนอยู่ ให้เปิดแผง FigBloxUI ใน Studio แล้วดูเลขเวอร์ชันที่ด้านล่างของหน้า Settings

อัปเดตมาจากเวอร์ชันเก่า? ทำตามนี้ครั้งเดียว

หลังอัปเดตครั้งนี้ การ export แบบ Code และ Live ต้องเชื่อมต่อ Roblox ใหม่อีกครั้ง

1. ปิดแล้วเปิดปลั๊กอิน Figma ใหม่ เพื่อให้โหลดเวอร์ชันใหม่
2. กด Manage ข้าง Image owner หรือกด Logout แล้วตามด้วย Login with Roblox จากนั้นทำขั้นตอนบนหน้าจอ Roblox ให้เสร็จ
3. เลือก Image owner: จะเป็นบัญชี Personal ของคุณ หรือ Group ใด Group หนึ่งของคุณก็ได้ ไม่มีค่าเริ่มต้นให้ และปลั๊กอินจะจำตัวเลือกไว้
4. อัปเดตปลั๊กอิน Studio เป็น 3.0.0 เพราะ Live จะไม่ import บนเวอร์ชันเก่า

ระหว่างนี้ ZIP export ยังใช้ได้ตามปกติ และไม่กระทบไลเซนส์หรือรูปที่อัปโหลดไว้แล้ว ถ้า import ดีไซน์เดิมซ้ำ อาจมีบางเลเยอร์เพิ่มขึ้นหรือเปลี่ยนชื่อ เพราะตอนนี้ดีไซน์ของคุณแก้ไขต่อได้มากขึ้น ดังนั้นให้เช็กสคริปต์ที่หา UI จากชื่อ และใช้ Replace แบบเต็ม (ทั้ง ScreenGui) ตอนอัปเกรดเลย์เอาต์ที่มีอยู่แล้ว

เงาและมุมโค้งแบบ native

ค่าเริ่มต้นคือ drop shadow จะ import มาเป็น UIShadow และมุมโค้งที่ตั้งแยกแต่ละมุมจะมาเป็น property แบบ native ของ UICorner จึงแก้ไขต่อใน Studio ได้เลย ส่วนแสงเรืองที่ทอดจากเนื้อหาข้างในเลเยอร์ เช่น รอบไอคอนหรือข้อความ จะมาเป็นรูปเงารูปเดียววางไว้หลังเลเยอร์แทน จึงเป็นรูปทรงตามเนื้อหาเหมือนใน Figma ไม่ต้องเปิดฟีเจอร์ beta ใดๆ ใน Studio ถ้าอยากให้แปลงเป็นรูปแทน (เช่น อยากให้เบลอตรงกับ Figma เป๊ะๆ) ให้เปิด Settings ในปลั๊กอิน Figma แล้วปิด Native shadows and corners

ขั้นตอนที่ 3: เลือกโหมด export

FigBloxUI มีโหมด export 3 แบบ ZIP Mode เป็นค่าเริ่มต้น ไม่ต้องล็อกอิน Roblox

ZIP Mode (ค่าเริ่มต้น, ไม่ต้องล็อกอิน)

1. เปิดปลั๊กอิน Figma (Plugins → FigBloxUI)
2. เลือกเฟรมที่จะส่งใน Figma
3. กด “Export ZIP” → ดาวน์โหลดไฟล์ ZIP
4. กด “Copy Code”
5. อัปโหลดรูปจากไฟล์ ZIP ขึ้น Roblox ด้วย Asset Manager ของ Studio
6. ใน Asset Manager: เลือกรูปที่อัปโหลดแล้ว → คลิกขวา → Insert
7. รูปจะไปอยู่ที่ ServerStorage → Loaded
8. เปิดปลั๊กอิน Studio → ไปที่แท็บ Paste Code
9. วางโค้ด → ปลั๊กอินจะ สแกนโฟลเดอร์ Loaded อัตโนมัติ แล้วจับคู่รูปให้
10. ถ้ายังจับคู่ไม่ครบ: ลากรูปจาก Image Gallery ด้านล่างมาใส่เอง หรือกด “Scan”
11. กด “Import”

Code Mode (ล็อกอิน Roblox)

1. เปิดปลั๊กอิน Figma → Login with Roblox (ปลั๊กอินจะสลับไปโหมด Code ให้อัตโนมัติ)
2. บนหน้าจอ Roblox ให้อนุญาต FigBloxUI แล้วเลือกบัญชี Personal ของคุณ และ Group ที่อยากให้เป็นเจ้าของรูป
3. เลือกเฟรมใน Figma แล้วเลือก Image owner ที่อยู่เหนือปุ่ม Export Code (เลือกแค่ครั้งเดียว ปลั๊กอินจะจำไว้)
4. กด “Export Code” → รอให้รูปอัปโหลดเสร็จ
5. กด “Copy Code”
6. เปิดปลั๊กอิน Studio → ไปที่แท็บ Paste Code
7. วางโค้ด → รูปทั้งหมดจับคู่ไว้ให้เรียบร้อยแล้ว (asset ID ฝังอยู่ในโค้ด)
8. กด “Import”

Live Mode (เรียลไทม์)

1. เปิดปลั๊กอิน Figma → Login with Roblox
2. บนหน้าจอ Roblox ให้อนุญาต FigBloxUI แล้วเลือกบัญชี Personal ของคุณ และ Group ที่อยากให้เป็นเจ้าของรูป
3. เปิด แผง FigBloxUI ใน Studio และ เปิดค้างไว้ ปลั๊กอินจะเชื่อมต่อเองตราบใดที่แผงยังเปิดอยู่ (ไม่มีปุ่ม Connect)
4. สลับไปโหมด Live ในปลั๊กอิน Figma แล้วเลือก Image owner ที่อยู่เหนือปุ่ม Send to Roblox
5. เลือกเฟรม → กด “Send to Roblox”
6. UI จะขึ้นใน Studio เมื่อส่งเสร็จ ดีไซน์เล็กใช้เวลาไม่กี่วินาที แต่ดีไซน์ใหญ่อาจใช้เวลาหลายนาทีในครั้งแรก เพราะต้องเตรียมและอัปโหลดรูป แผง Images จะแสดงความคืบหน้า และรูปที่ไม่ได้เปลี่ยนจะถูกนำมาใช้ซ้ำ Send ครั้งต่อๆ ไปจึงเร็วขึ้น
7. แก้ดีไซน์ใน Figma → ส่งอีกครั้ง → เลือก Replace เพื่อสร้าง ScreenGui ใหม่ทั้งหมด หรือเลือกเฉพาะเลเยอร์ที่เปลี่ยนก่อนส่ง เพื่ออัปเดตแค่ส่วนนั้น (ดู FAQ)

หมายเหตุ: Live Mode ต้องให้สิทธิ์ HTTP กับปลั๊กอิน FigBloxUI ใน Studio (กดอนุญาตตอนที่ Studio ถาม หรือตั้งที่ Plugins → Manage Plugins) ไม่ต้องเปิดสวิตช์ “Allow HTTP Requests” ใน Experience Settings

เปรียบเทียบแบบย่อ

	Live	Code	ZIP
ล็อกอิน Roblox	ต้อง	ต้อง	ไม่ต้อง
เชื่อมต่อกับ Studio	ต้อง	ไม่ต้อง	ไม่ต้อง
อัปโหลดรูป	อัตโนมัติ (Personal หรือ Group)	อัตโนมัติ (Personal หรือ Group)	อัปโหลดเอง (Asset Manager)
HTTP Requests	ต้องใช้	ไม่ต้องใช้	ไม่ต้องใช้
เหมาะกับ	แก้แล้วส่งดูผลบ่อยๆ	แชร์งานให้ทีม	งานรับจ้าง (commission)

เรื่องการตรวจรูปของ Roblox

รูปทุกรูปที่อัปโหลดขึ้น Roblox ไม่ว่าจะให้ FigBloxUI อัปโหลดอัตโนมัติ หรือ อัปโหลดเองผ่าน Asset Manager จะผ่านการตรวจด้วย AI ของ Roblox แบบเดียวกันหมด บางครั้งก็โดนตีตกทั้งที่ไม่ได้ผิดอะไร (โดยเฉพาะ texture และลวดลาย) แต่ยื่นอุทธรณ์ได้ทุกกรณีภายใน 30 วัน ดูคู่มือฉบับเต็มและเทมเพลตคำอุทธรณ์ที่ก๊อปไปวางได้เลยที่ การตรวจรูปของ Roblox และการอุทธรณ์

อะไรแปลงเป็นอะไรบ้าง

สิ่งที่อยู่ใน Figma	อินสแตนซ์ใน Roblox
Frame/Group	Frame
Text	TextLabel
รูปทรง Vector	ImageLabel (export เป็น PNG ให้อัตโนมัติ)
Image fill	ImageLabel (อัปโหลดให้อัตโนมัติ)
fill สีทึบหรือ linear gradient ที่ซ้อนกันหลายชั้น	Frame ที่ซ้อนกันเป็นชั้นๆ
ปุ่ม (ที่ตรวจเจอ)	TextButton / ImageButton
Auto Layout	UIListLayout + UIPadding
การ์ดที่เว้นระยะเท่าๆ กันในพื้นที่เลื่อน (scroll)	UIGridLayout
Corner Radius	UICorner
Corner Radius แยกแต่ละมุม	property แยกแต่ละมุมของ UICorner
Stroke	UIStroke
Linear Gradient	UIGradient
Drop Shadow	UIShadow (แสงเรืองที่ทอดจากเนื้อหาข้างในเลเยอร์: รูปเงาวางไว้ด้านหลัง)
drop shadow แบบขอบคมบนข้อความ	สำเนา TextLabel ที่วางไว้หลังข้อความ