วิธีใช้งาน

แผง Preview

เมื่อเปิด FigBloxUI จะเห็นส่วนต่างๆ ดังนี้:

• Sections Sidebar (ซ้าย): เฟรมระดับบนสุดทั้งหมดในหน้าที่เปิดอยู่
• Preview (กลาง): พรีวิวแบบโต้ตอบได้ของเฟรมที่เลือก ส่วนแท็บ Structure ที่อยู่ข้างๆ จะแสดง tree ที่การ export จะสร้างขึ้น
• Assign Bar (ล่าง): ใช้เปลี่ยนคลาส Roblox ขององค์ประกอบที่เลือก
• แผง Images (ใต้ Assign Bar): เปลี่ยนชื่อ ข้าม หรือรวมรูปก่อน export

ใต้พรีวิวมี Layout ให้เลือกว่าจะคงการจัดวางตามดีไซน์เดิม หรือจัดไอเท็มเป็น Grid โดยกำหนดจำนวนคอลัมน์สูงสุด และระยะห่างระหว่างคอลัมน์กับแถวได้ คอนเทนเนอร์แบบเลื่อนจะขยายตามจำนวนไอเท็มที่เพิ่มเข้าไป

การเลือกองค์ประกอบ

• คลิก องค์ประกอบในพรีวิวเพื่อเลือก
• Shift+Click เพื่อเลือกเพิ่ม
• ลาก คลุมเพื่อเลือกหลายองค์ประกอบพร้อมกัน
• Ctrl/Cmd+A เพื่อเลือกทั้งหมด
• ดับเบิลคลิก เพื่อเข้าไปในเฟรมที่ซ้อนอยู่ข้างใน
• Select All ใต้พรีวิวจะเลือกทุกอย่าง ส่วน Hide Classes จะซ่อนป้ายชื่อคลาสที่แสดงอยู่บนพรีวิว

เมื่อเลือกองค์ประกอบไว้ ปุ่ม export จะส่งเฉพาะส่วนที่เลือก และอัปเดตส่วนนั้นใน ScreenGui ที่ import ไปแล้ว บรรทัดเหนือปุ่มจะบอกว่าจะส่งอะไรไปบ้าง

ถ้าการ Send จะไปลงที่ ScreenGui ที่มีชื่อเดียวกัน ปลั๊กอินจะถามก่อนว่าจะทำอย่างไร Replace จะเหลือ ScreenGui ไว้อันเดียว และใช้โหมด Offset หรือ Scaled ของอันที่ import ไว้เดิม เว้นแต่คุณจะยืนยันให้เปลี่ยน Keep Both จะเพิ่ม ScreenGui ใหม่ไว้ข้างๆ (Name_copy แล้วตามด้วย Name_copy2) และแต่ละชุดใช้โหมดของตัวเอง Cancel จะไม่แตะอะไรใน Studio เลย ส่วนใน Studio กด Undo (Ctrl/Cmd+Z) ครั้งเดียวจะลบการ import นั้นออกทั้งหมด

กำหนดคลาส Roblox

โดยค่าเริ่มต้น FigBloxUI จะตรวจหาคลาสให้อัตโนมัติ:

• เฟรม → Frame
• ข้อความ → TextLabel
• ปุ่ม (ดูจากชื่อหรือ click reaction) → TextButton / ImageButton
• โหนดที่มี image fill → ImageLabel

ถ้าอยากกำหนดเอง:

1. เลือกองค์ประกอบหนึ่งอันหรือมากกว่า
2. คลิกปุ่มคลาสใน Assign Bar
3. คลาสที่กำหนดจะมีผลทันที (เห็นเป็นกรอบสี)

คลาสที่เลือกได้

คลาส	ใช้กับ
ImageButton	รูปที่กดได้
TextLabel	ข้อความที่อ่านได้อย่างเดียว
ImageLabel	รูปตกแต่ง
TextButton	ข้อความที่กดได้
TextBox	ช่องกรอกข้อความ
ScrollingFrame	คอนเทนเนอร์ที่เลื่อนได้
ViewportFrame	วิวพอร์ต 3D
CanvasGroup	ปรับความโปร่งใสทั้งกลุ่ม
Frame	คอนเทนเนอร์ทั่วไป
Exclude	ข้ามองค์ประกอบนี้ไปทั้งหมด

แท็บ Structure

คลิก Structure เหนือพรีวิวเพื่อดู tree ที่การ export จะสร้างขึ้น พร้อมไอคอนคลาสแบบเดียวกับใน Studio จำนวนอินสแตนซ์และจำนวนรูป และป้าย (badge) บนจุดที่ควรเข้าไปดู ขยายแถวได้เหมือนใน Explorer ของ Studio คลิกแถวที่มีป้ายเพื่ออ่านเหตุผล หรือติ๊ก Issues only เพื่อซ่อนแถวอื่น ส่วนหัวจะสรุปไว้ให้ เช่น “3 images to check”, “2 fonts to check” หรือ “No issues found” ถ้าเปลี่ยนคลาสของเลเยอร์ใน Assign Bar ตัว tree จะอัปเดตทันที

ป้ายมีสามแบบ:

• Image: เลเยอร์นี้จะกลายเป็นรูปเดียว Structure จะบอกเหตุผลไว้ เช่น มี mask, มี blend mode (เรนเดอร์รวมกับพื้นหลังของมัน), มีรัศมีมุมแต่ละมุมไม่เท่ากันหรือมี corner smoothing, มีการ skew, ใช้ gradient ประเภทที่ Roblox ไม่มี, มีหลาย fill หรือหลายเลเยอร์รูป, มี image fill บนคอนเทนเนอร์, มีเอฟเฟกต์อย่าง blur, มีขอบที่หนาไม่เท่ากันหรือเป็น gradient หรือมีพื้นที่เลื่อนที่ข้างในมีแต่รูปทรง ข้อความจะยังเป็นข้อความที่แก้ไขได้แทบทุกกรณี แม้จะมีอีโมจิ, skew, mask, เอฟเฟกต์ หรือ _gray ข้อความจะกลายเป็นรูปก็ต่อเมื่อคุณตั้งชื่อเลเยอร์ข้อความนั้นเองด้วย suffix ของรูป เช่น _ImageLabel หรือเมื่อมันเป็นส่วนหนึ่งของ boolean shape หรือถูกใช้เป็น mask drop shadow ที่เนื้อหาข้างในเลเยอร์ทอดออกมา เช่น แสงเรืองรอบไอคอน จะกลายเป็นรูปเดียววางไว้หลังเลเยอร์นั้น ส่วนเลเยอร์ข้างในยังแก้ไขได้ ถ้าเป็นเฟรมที่ clip, เลื่อนได้ หรือมีเลย์เอาต์ เงานี้จะอยู่ในเฟรม holder จึงไม่ถูกตัดและไม่กลายเป็นไอเท็มในเลย์เอาต์ ในโหมด Separate และ Preserve layers บางแถวอาจบอกด้วยว่าเฉพาะหน้าตาของเลเยอร์นั้นเองที่กลายเป็นรูป ส่วนเลเยอร์ลูกข้างในยังแยกกันอยู่
• Check: เรื่องที่ควรตัดสินใจก่อนส่ง ได้แก่ ข้อความที่มี fill ซ้อนหลายชั้น, ข้อความที่ใช้ blend ซึ่งปรับสีให้ตรงกับสิ่งที่อยู่ข้างหลังไม่ได้ (ข้อความยังแก้ไขได้), ข้อความที่อยู่ใต้เลเยอร์ที่ใช้ blend (ถูกย้ายขึ้นมาอยู่เหนือรูปของเลเยอร์นั้น หรือถ้าย้ายไม่ได้ จะถูกบังอยู่ใต้รูปพร้อมคำแนะนำ), เลเยอร์ที่ใช้ blend ซึ่งมาโดยไม่มีสิ่งที่อยู่ข้างหลังหรือถูกวาดโดยไม่ blend (พร้อมคำแนะนำให้จัดเลเยอร์ที่ใช้ blend กับเลเยอร์ข้างหลังไว้ในกลุ่มเดียวกัน), แสงเรืองบนเฟรมที่คุณส่ง (จะยังเป็นเงา native และอาจดูเป็นกล่องสี่เหลี่ยม ให้ส่งเฟรมแม่ของมันแทนเพื่อให้ได้แสงเรืองเป็นรูป), เงาของข้อความ (จะเก็บไว้เป็นข้อความสำเนาที่วางไว้ด้านหลัง), หน้าตาของข้อความที่ Roblox วาดไม่ได้ เช่น blur, เงานุ่ม, การ clip ด้วย mask หรือ skew (ข้อความยังแก้ไขได้ และแถวนั้นจะบอกว่าอะไรถูกตัดทิ้งหรือถูกวาดต่างไปเล็กน้อย), ขอบของเฟรมที่มีสี่เหลี่ยมลูกข้างในทำสไตล์ไว้อยู่แล้ว, เลเยอร์ที่วางแบบ absolute ใน Auto Layout ซึ่งจะกลายเป็นไอเท็มในลิสต์, grid ที่ใช้ตำแหน่งตาม Figma ทำให้ไอเท็มที่เพิ่มทีหลังต้องจัดตำแหน่งเอง หรือพื้นที่เลื่อนที่เนื้อหาไม่ได้ยาวเกินขอบของมัน
• Font: ฟอนต์ที่ Roblox ไม่มี (จะถูกแทนด้วย BuilderSans), ฟอนต์ที่จับคู่กับตัวที่ใกล้เคียง หรือฟอนต์ที่ Roblox วาดออกมาเล็กกว่า (ขนาดจะถูกชดเชยให้)

พื้นที่เลื่อน: ถ้าพื้นที่เลื่อน (scroll area) ใหญ่กว่าแผงที่มันอยู่ แถวของมันจะมีปุ่ม Fix ชี้เมาส์ค้างไว้เพื่อดูขนาดใหม่ แล้วคลิกเพื่อให้พื้นที่เลื่อนที่ export ออกไปพอดีกับแผงนั้น เลเยอร์ใน Figma ยังอยู่ที่เดิม และตัวเลือกนี้จะถูกบันทึกไว้ในไฟล์ คลิก Reset เพื่อกลับไปใช้ขนาดตาม Figma ถ้าภายหลังเปลี่ยนเลย์เอาต์ Structure จะแจ้งว่าค่าที่แก้ไว้ไม่ตรงกับเลย์เอาต์แล้ว

การทำงานอื่นๆ: เลือกแถวแล้วเลือกคลาสใน Assign Bar เพื่อกำหนดคลาสของแถวนั้นเอง Report bug จะส่งโครงสร้างเลเยอร์ของ section นั้นไปพร้อมโน้ตและภาพหน้าจอของคุณ แล้วให้โค้ดไว้อ้างอิงเวลาแจ้งใน Discord ถ้าการ export ต้องหยุดกลางทางเพราะลบเลเยอร์ชั่วคราวไม่ได้ จะมีแถบใต้ activity log แสดงเลเยอร์นั้นพร้อมปุ่ม Show layer, Check again และ Remove copy… ซึ่งปุ่มสุดท้ายจะแสดงก่อนว่าจะลบอะไร และถามก่อนลบทุกครั้ง ถ้าพลาดก็ Undo ใน Figma ได้

แผง Images

แผง Images ใต้ Assign Bar จะแสดงรูปทุกรูปที่การ export จะอัปโหลด ให้ดูได้ก่อนส่ง:

• เปลี่ยนชื่อ รูปได้โดยแก้ในช่องข้อความ
• ข้าม รูปได้โดยคลิกปุ่ม × (กด ↩ เพื่อยกเลิก)
• รวม รูปที่ซ้ำกันได้โดยลากการ์ดใบหนึ่งไปวางบนอีกใบ (จะใช้การอัปโหลดร่วมกัน)

ระหว่าง Send แผงนี้จะค่อยๆ เติมรูปเข้ามาตามที่เตรียมเสร็จ (“Sending… 37 images collected”) เมื่อเสร็จแล้วจะแสดงสิ่งที่อัปโหลดไปจริง (“Sent · 123 images · 118 unique”) ซึ่งอาจต่างจากพรีวิวเล็กน้อย การ์ดที่มีป้าย “×N backdrops” คือเลเยอร์ที่มี blend ซึ่งจะอัปโหลดแยกหนึ่งครั้งต่อพื้นหลังแต่ละแบบที่มันวางทับอยู่ จึงตรงกับ Figma บนพื้นหลังทุกแบบ

ในโหมด Separate และ Preserve layers ภาพย่อจะแสดงเลเยอร์ที่ถูก mask แบบเต็มๆ เพื่อให้แยกออกว่าเป็นอันไหน แต่ตอน Send ก็ยังตัดตาม mask เหมือนเดิม ถ้าขยายหน้าต่างปลั๊กอินให้สูงขึ้น ความสูงที่เพิ่มมาจะไปอยู่ที่แผงนี้ และถ้าขยายให้กว้างขึ้น แต่ละแถวก็จะแสดงรูปได้มากขึ้น

ปลั๊กอิน Studio: Paste Code

หลัง export จาก Figma (โหมด Code หรือ ZIP) ให้เปิดปลั๊กอิน Studio แล้วไปที่แท็บ Paste Code

วางโค้ดแล้วสแกนอัตโนมัติ

1. วางโค้ดลงในช่องข้อความ
2. ปลั๊กอินจะอ่านโค้ด แล้ว สแกนอัตโนมัติ ใน ServerStorage > Loaded (หรือ Workspace / ReplicatedStorage ถ้า Asset Manager วางรูปไว้ตรงนั้น) เพื่อหารูปที่ตรงกัน
3. จะเห็นจำนวนรูปที่จับคู่ได้ (เช่น “28/28 mapped”)
4. คลิก “Import” เพื่อสร้าง ScreenGui

ถ้าขึ้นว่า “0/28 mapped” ทันทีหลังอัปโหลดผ่าน Asset Manager แปลว่ารูปยังมาไม่ถึง ให้รอจน Import Queue แสดงว่าทุกไฟล์อัปโหลดเสร็จแล้ว คลิก Scan แล้วกด Import อีกครั้งและเลือก Replace ถ้า import เร็วเกินไป จะได้ tree ที่ถูกต้องแต่รูปว่างเปล่า

รายการรูป (Image Manifest)

รายการรูปจะแสดงรูปทุกรูปที่ต้องใช้ พร้อมภาพย่อและ rbxassetid:

• ชี้เมาส์ ที่แถว → องค์ประกอบที่ตรงกันใน ScreenGui จะไฮไลต์เป็นสีม่วง
• คลิก ที่แถวเพื่อปักไฮไลต์ค้างไว้ (คลิกที่อื่นเพื่อยกเลิก)
• แถวที่มีรูปแล้ว จะแสดงภาพย่อ + asset ID
• แถวว่าง จะแสดงช่องว่างรอใส่รูป: กำหนดรูปได้ด้วย Scan, ลากจาก Gallery หรือกรอกเอง

ปุ่ม Scan

คลิก “Scan” เพื่อค้นหารูปที่ตรงกัน ปลั๊กอินจะหาใน ServerStorage > Loaded ก่อน แล้วค่อยไปหาที่ระดับบนสุดของ Workspace และ ReplicatedStorage เผื่อ Asset Manager วางรูปไว้ตรงนั้น:

• จับคู่ด้วย Figma node ID ที่เก็บอยู่ใน attribute JSON ชื่อ FigBloxUIData (แม่นยำที่สุด)
• ถ้าไม่เจอ จะใช้ attribute Id และ จับคู่จากชื่อ แทน (รับมือได้แม้ Asset Manager จะตัดชื่อไฟล์ที่ยาวให้สั้นลง)
• เติมเฉพาะ แถวว่าง เท่านั้น ไม่เขียนทับรูปที่กำหนดไว้แล้ว
• ปุ่มจะกดไม่ได้เมื่อจับคู่รูปครบทุกรูปแล้ว
• ระหว่างสแกนจะมีไอคอนหมุนแสดงทับอยู่

Image Gallery

ใต้รายการ manifest จะเห็น Image Gallery ซึ่งเป็นกริดของรูปทั้งหมดที่ปลั๊กอินเจอ (ส่วนใหญ่มาจาก ServerStorage > Loaded หรือที่อื่นถ้า Asset Manager วางไว้ที่อื่น):

• ชี้เมาส์ ที่ภาพย่อเพื่อดูชื่อ
• ลาก จาก gallery ไปวางบนแถวไหนก็ได้ใน manifest เพื่อกำหนดรูป
• Gallery จะ รีเฟรชอัตโนมัติ เมื่อมีการเพิ่มหรือลบรูป
• ถ้าไม่เจอรูปเลย จะขึ้นว่า “Asset Manager: select images → right-click → Insert”

ลากสลับรูประหว่างแถว

จับภาพย่อจากแถวหนึ่งใน manifest แล้วลากไปวางบนอีกแถว:

• จะมี พรีวิวแบบโปร่งแสง ตามเคอร์เซอร์ไป
• ปล่อยเพื่อ สลับ asset ID
• ถ้าขนาดไม่เท่ากัน จะมีป๊อปอัปถามว่า “Also apply size from source?”: กด Yes, apply เพื่อใช้ขนาดตามต้นทาง หรือ No เพื่อคงขนาดเดิม
• คลิกขวา เพื่อยกเลิกระหว่างลาก

ล้างและย้อนกลับ

• คลิก × บนแถวที่มีรูปเพื่อล้างรูปที่กำหนดไว้
• คลิก ลูกศร undo เพื่อเอารูปเดิมกลับมา ในขนาดเดิมก่อนสลับ
• ใช้ได้ทั้งกับการลากวางและการล้าง

แท็บ History

คลิก “History” เพื่อดูการ import ครั้งก่อนๆ:

• คลิกรายการไหนก็ได้เพื่อโหลดโค้ดนั้นกลับมา
• มีประโยชน์เวลาอยากย้อนกลับไปเวอร์ชันก่อน หรือ import ซ้ำในตำแหน่งอื่น

เปรียบเทียบการตั้งค่า

ปลั๊กอินจะจำการตั้งค่าทุกอย่างไว้ข้ามเซสชัน การตั้งค่าส่วนใหญ่เปลี่ยนได้ใน Settings ของปลั๊กอิน แต่มีบางอย่างอยู่ที่หน้าหลักแทน ได้แก่ Offset / Scaled ข้างปุ่มเลือกโหมด export, Image owner เหนือปุ่ม export และ Hide Duplicates ในแผง Images

Artwork layers

	ขนาดของการ import	เวลาที่ใช้ Send
Automatic (ค่าเริ่มต้น)	มักเล็กที่สุด	มักเร็วที่สุด
Separate	มักอยู่ระหว่างกลาง	มักนานกว่า Automatic
Preserve layers	มักใหญ่ที่สุด	Send ครั้งแรกใช้เวลานานกว่า

ควรเลือกแบบไหน และจะได้อะไรใน Studio:

• Automatic: เลือกเมื่ออยากได้การ import ที่เร็วและเบาสำหรับ UI ทั่วไป ข้อความ ปุ่มที่มี label เลย์เอาต์ และลิสต์แบบเลื่อนยังแก้ไขได้ ส่วนกลุ่มอาร์ตเวิร์กมักถูกรวมเป็นรูปเดียว กลุ่มตกแต่งที่มี mask จะมาเป็นรูปเดียวที่รวม mask ไว้ในตัวแล้ว ชื่อต่างๆ จะถูกจัดให้เรียบร้อย: เฟรมบนสุดจะชื่อ Container และ suffix อย่าง _ScrollingFrame จะถูกตัดออก
• Separate: เลือกเมื่ออยากปรับสไตล์แผง การ์ด และลิสต์ใน Studio โดยไม่ต้องมาจัดการเลเยอร์ตกแต่งทุกชิ้น ส่วนที่แก้ไขได้ยังเหมือนกับ Automatic และอาร์ตเวิร์กแต่ละชิ้นที่แยกเป็นอิสระจะได้รูปของตัวเอง ส่วนของตกแต่งที่ต้องอยู่ด้วยกันถึงจะดูถูก เช่น แสงเรืองกับ mask ของมัน หรือลายทางบนปุ่ม จะมาเป็นรูปเดียว mask บนส่วนที่ยังแก้ไขได้จะทำงานแบบเดียวกับ Preserve layers และชื่อจาก Figma จะคงไว้ทั้งหมด รวมถึงชื่อเฟรมบนสุดด้วย
• Preserve layers: เลือกเมื่ออยากแก้หรือทำแอนิเมชันอาร์ตเวิร์กทีละชิ้นใน Studio โหมดนี้แยกเลเยอร์และคอนเทนเนอร์จาก Figma ไว้มากขึ้น โดยเก็บชื่อและลำดับการซ้อน รวมถึงชื่อเฟรมบนสุด เลเยอร์ที่รองรับจะใช้ออบเจกต์ native ส่วนหน้าตาที่วาดเองไม่ได้จะใช้รูป และของตกแต่งบางส่วนจะถูกรวมตามกรณีด้านล่าง mask ที่เป็นวงกลมหรือมุมโค้งเท่ากันทุกมุมจะยังเป็น clip ที่แก้ไขได้ ส่วน mask แบบอื่นส่วนใหญ่จะถูกรวมไว้ในรูป และเลเยอร์ mask จะยังอยู่ใน tree แต่ถูกซ่อนไว้ กลุ่มตกแต่งที่มี blur หรือมี blend mode ของตัวเอง รวมถึงกลุ่ม เฟรม หรือคอมโพเนนต์ที่หมุนหรือกลับด้านและมีแต่อาร์ตเวิร์กที่ใช้ blend อยู่ข้างใน จะมาเป็นรูปเดียว จึงตรงกับ Figma

ในโหมด Automatic และ Separate ปุ่มที่วาดด้วยอาร์ตเวิร์กล้วนๆ อาจยังมาเป็นรูปเดียว เหมือนปุ่มปิดในตัวอย่างด้านล่าง ในทุกโหมด พื้นที่เลื่อนที่ตั้งชื่อด้วย _ScrollingFrame หรือ _scroll ไม่มี auto layout ของตัวเอง และมี mask มุมโค้งหรือวงกลมขนาดเท่าเฟรมเป็นเลเยอร์แรก จะยังมีขอบโค้งเหมือนเดิม และทุกอย่างข้างในยังแก้ไขได้และเลื่อนได้ (ดู เคล็ดลับ ScrollingFrame)

Blend mode: Roblox ทำ blend เองไม่ได้ ในทุกโหมด อาร์ตเวิร์กที่ใช้ blend mode อย่าง Overlay หรือ Multiply จึงถูกวาดทับสิ่งที่อยู่ข้างหลังมันใน Figma โดยไม่ต้องเปิดอะไรเพิ่ม รูปทรง แถบ และเส้นคั่นบางๆ ที่ใช้ blend จะมาเป็นรูปที่สีตรงกับ Figma แม้จะอยู่บนพื้นหลังโปร่งใส ตราบใดที่พื้นหลังนั้นยังเหมือนที่ออกแบบไว้ ถ้าเปลี่ยนสีหรือซ่อนพื้นหลังนั้นใน Studio ชิ้นที่ blend ไว้จะไม่ blend กับพื้นหลังใหม่ ข้อความที่ใช้ blend จะยังเป็นข้อความที่แก้ไขได้ สีข้อความที่รองรับจะถูกผสมให้ตรงกับ Figma เมื่ออยู่บนพื้นสีทึบสีเดียวโดยตรง แต่ gradient ของข้อความบางแบบจะยังใช้สีเดิมแม้อยู่บนพื้นแบบนั้น เช่น blend แบบ Difference หรือ gradient ที่จุดสีมี opacity ต่างกัน Structure จะแจ้ง blend ที่ทำตามไม่ได้ ถ้าอยู่บนพื้นหลังที่เป็นรูปหรือ gradient ข้อความจะใช้สีเดิมของตัวเอง ข้อความที่อยู่ใต้เลเยอร์ที่ใช้ blend จะถูกย้ายขึ้นมาอยู่เหนือรูปของเลเยอร์นั้นเพื่อให้ยังมองเห็นได้ และ Structure จะบอกถ้าย้ายไม่ได้ ยังมี blend บางกรณีที่อาจมาโดยไม่มีสิ่งที่อยู่ข้างหลังมัน ส่วนใหญ่ในโหมด Preserve layers ได้แก่ เลเยอร์ที่ใช้ blend ซึ่งส่งมาเดี่ยวๆ, เลเยอร์ที่อยู่ในเฟรมหรือกลุ่มที่มี blend mode ของตัวเองหรือมีเอฟเฟกต์อย่างเงาหรือ blur หรืออยู่ในเฟรมที่ opacity ต่ำกว่า 100% (นับรวมเฟรมที่คุณส่งด้วย), เลเยอร์ที่หมุน กลับด้าน หรือย่อขยายเพียงเพราะกลุ่มหรือเฟรมรอบๆ มันเป็นแบบนั้น เมื่อกลุ่มหรือเฟรมนั้นมีข้อความ ปุ่ม หรือเลเยอร์อื่นที่ยังแก้ไขได้อยู่ด้วย และเลเยอร์ในเฟรมที่หมุนอยู่ซึ่งคุณส่งมา เฟรมหรือกลุ่มที่มี blend mode ของตัวเองและมีข้อความ ปุ่ม หรือเลเยอร์อื่นที่ยังแก้ไขได้อยู่ข้างใน จะถูกวาดโดยไม่ blend ในทุกโหมด เลเยอร์ที่หมุนด้วยตัวเองจะตรงกับ Figma และในโหมด Preserve layers กลุ่ม เฟรม หรือคอมโพเนนต์ที่หมุน กลับด้าน หรือย่อขยาย และมีแต่อาร์ตเวิร์ก จะมาเป็นรูปเดียวที่ตรงกับ Figma Structure จะชี้กรณีเหล่านี้ให้เกือบทั้งหมด พร้อมคำแนะนำให้จัดเลเยอร์ที่ใช้ blend กับเลเยอร์ที่อยู่ข้างหลังไว้ในกลุ่มของมันเอง ในโหมด Automatic หรือ Separate ยังเติม _image ท้ายชื่อเฟรมที่มีทั้งเลเยอร์ที่ใช้ blend และสิ่งที่อยู่ข้างหลังมันได้ด้วย โดยข้อความข้างในจะยังแก้ไขได้อยู่ด้านบน blend ทำให้ Send ครั้งแรกนานขึ้น เพราะเลเยอร์ที่ใช้ blend แต่ละชั้นจะถูกเรนเดอร์เพิ่มอีกสูงสุดสองครั้งทับสิ่งที่อยู่ข้างหลังมัน และในโหมด Separate และ Preserve layers การเรนเดอร์ส่วนนี้อาจกินเวลาเกือบทั้งหมดของการ Send ตอนส่งซ้ำจะใช้รูปเดิมที่ไม่ได้เปลี่ยนต่อได้เลย

ในโหมด Separate และ Preserve layers mask บางอันจะถูกรวมไว้ในรูปที่มันตัดด้วย อาร์ตเวิร์กที่มี mask จึงตรงกับ Figma สองโหมดนี้มักส่งนานกว่า และ mask กับ blend บางจุดอาจยังดูต่างไปเล็กน้อย จึงควรเช็ก Structure ก่อนส่ง การ import แบบ Scaled ในสองโหมดนี้ต้องใช้ปลั๊กอิน Studio 3.0.0

การสลับโหมด: แต่ละโหมดจะสร้าง tree ใน Studio ไม่เหมือนกัน ถ้าสลับโหมดกับดีไซน์ที่เคย import ไปแล้ว ให้ส่งทั้งเฟรมด้วย Replace แล้วตรวจสคริปต์ที่หา UI จากชื่อหรือ path ด้วย

ลองกับดีไซน์จริง: เราส่งแผง inventory เดียวกัน (ช่องไอเท็ม 12 ช่อง ส่วนหัว ปุ่มปิด และแผงข้อมูล) ด้วยทั้งสามโหมด ข้อความทั้งหมด สีของปุ่ม Equip Best, Equip และ Delete แถบค้นหา และกริดแบบเลื่อน (ScrollingFrame ที่มี UIGridLayout แถวละ 4 ช่อง) แก้ไขได้ในทุกโหมด ส่วนที่ต่างกันคืออาร์ตเวิร์ก:

• จำนวนรูป: Automatic ใช้น้อยที่สุด Separate ใช้มากขึ้น และ Preserve layers ใช้มากที่สุด
• การ์ดแต่ละช่อง: ใน Automatic เป็นรูปเดียวที่มีข้อความสองอันวางอยู่ด้านบน และทั้ง 12 การ์ดใช้รูปร่วมกัน ใน Separate และ Preserve layers จะได้พื้นหลังมุมโค้งที่แก้ไขได้ พร้อม gradient และขอบ ส่วนอาร์ตที่เหลือของการ์ดมาเป็นรูป
• อาร์ตส่วนหัว: เป็นรูปเดียวในทุกโหมด ส่วนหัวที่เอียงอยู่และ blend ของมันจึงตรงกับ Figma
• ปุ่มปิด: เป็นรูปเดียวใน Automatic และ Separate แต่ใน Preserve layers จะมาเป็นชิ้นๆ เลยเปลี่ยนสีรูปเพชรหรือขยับตัว X แยกได้

Native shadows and corners

	On (ค่าเริ่มต้น)	Off
เงา (drop shadow)	เป็น UIShadow ที่แก้ไขได้ เมื่อเงาทอดจากกล่องของเลเยอร์เองที่มี fill เต็ม แสงเรืองที่ทอดจากเนื้อหาข้างในเลเยอร์ (รอบไอคอน วงแหวน หรือข้อความ หรือจากเฟรมที่ไม่มี fill) จะกลายเป็นรูปเงารูปเดียววางไว้หลังเลเยอร์ ตรงกับ Figma และเลเยอร์ข้างในยังแก้ไขได้ เงาแข็งบนข้อความจะกลายเป็นข้อความสำเนาที่วางไว้ด้านหลัง	ถูกรวมแบนเป็นรูป blur ตรงกับ Figma เป๊ะ
มุมที่รัศมีไม่เท่ากัน	เป็นค่า UICorner ที่แก้ไขได้	ถูกรวมแบนเป็นรูป

Clean image edges (Pixfix)

	On (ค่าเริ่มต้น)	Off
ผลลัพธ์	ลบขอบดำ (halo) รอบขอบโปร่งใส เช่น มุมโค้งและเงาฟุ้ง	อาจเห็นขอบดำตามมุมโค้ง
ต้นทุน	รูปที่ไม่ซ้ำกันแต่ละรูปจะถูกประมวลผลบนเซิร์ฟเวอร์ของ FigBloxUI ทำให้ export ขนาดใหญ่ใช้เวลาเพิ่มอีกไม่กี่วินาที	ไม่มีการประมวลผล

Offset และ Scaled (สวิตช์ข้าง Live, Code และ ZIP)

	Offset (ค่าเริ่มต้น)	Scaled
ขนาด	เป็นพิกเซล ตรงกับใน Figma ทุกอย่าง	เป็นเปอร์เซ็นต์ของหน้าจอ ตัว root จะคงอัตราส่วนตาม Figma และขยายเต็ม viewport
เลือกเมื่อ	เลย์เอาต์แบบตายตัวที่ต้องตรงกับ Figma ทุกพิกเซล	UI แบบ responsive สำหรับหน้าจอหลายขนาด
ใน Studio	Replace จะคงโหมดของการ import เดิมไว้ เว้นแต่คุณจะยืนยันให้เปลี่ยน ส่วน Keep Both ทุกชุดจะใช้โหมดของตัวเอง	เฟรมที่มี mask และ clip จะขยายเต็มหน้าจอ (ปลั๊กอิน Studio 3.0.0)

Export as SurfaceGui

Off (ค่าเริ่มต้น): ได้ ScreenGui ใน StarterGui ส่วน On: ได้ SurfaceGui บน Part ถ้าจะใช้ ให้เลือก Part ใน Studio ก่อน ถ้าไม่ได้เลือกอะไรไว้ ปลั๊กอินจะสร้าง Part ใหม่ขนาดเท่าดีไซน์ ตั้งไว้ตรงหน้ากล้อง

Image owner (Live และ Code)

เลือกได้ที่เหนือปุ่ม export Personal: รูปจะเป็นของบัญชี Roblox ของคุณ Group: รูปจะเป็นของ Group นั้น และ role ของคุณใน Group ต้องได้รับสิทธิ์สร้าง development items ตัวเลือกนี้ไม่มีค่าเริ่มต้น เลือกครั้งเดียวแล้วปลั๊กอินจะจำไว้ รายการจะแสดงเฉพาะเจ้าของที่คุณอนุญาตไว้ในหน้าจอของ Roblox และกด Manage เพื่ออนุญาต Personal หรือเพิ่ม Group อื่นได้ การเปลี่ยนเจ้าของจะซ่อน Copy Code จนกว่าจะ export ใหม่ และเจ้าของแต่ละรายจะได้สำเนารูปทุกรูปแยกกัน

รูปที่อัปโหลดในนาม Group จะแสดงเฉพาะใน experience ที่ Group นั้นเป็นเจ้าของ ถ้า import เข้า place ที่เป็นของบัญชีส่วนตัว Studio จะขอให้แชร์สิทธิ์เข้าถึงหนึ่งครั้งก่อนรูปจะแสดง ดังนั้นควรเลือกเจ้าของให้ตรงกับที่ที่เกมอยู่

Hide Duplicates

เปิดไว้เป็นค่าเริ่มต้นในแผง Images: รูปซ้ำที่รวมกันแล้วจะถูกซ่อน ให้ดูง่ายขึ้น

Plugin size

Full จะแสดง sections sidebar ทางซ้าย ส่วน Compact จะซ่อนไว้เพื่อให้หน้าต่างแคบลง

ควรใช้การตั้งค่าแบบไหนดี

Clean image edges และ Native shadows and corners เปิดไว้ตั้งแต่ต้น รูปจึงมีขอบสะอาดและเงาส่วนใหญ่ยังแก้ไขได้ ระหว่างที่ยังปรับงานไปเรื่อยๆ ให้ปิดการตั้งค่าที่กินเวลาไว้ก่อน แล้วค่อยเปิดกลับตอน Send รอบสุดท้าย เลือกโหมด Artwork layers ตามว่าจะแก้อาร์ตเวิร์กใน Studio มากแค่ไหน: แก้นิดหน่อย (Automatic), แก้แผง การ์ด และลิสต์ (Separate) หรือแก้ทุกชิ้น (Preserve layers) เลือกโหมดได้ทีละเฟรม โปรเจกต์เดียวใช้ครบทั้งสามโหมดก็ได้

Artwork layers

Automatic: มักได้ Send ที่เร็วที่สุดและการ import ที่เบาที่สุด ข้อความ ปุ่มที่มี label เลย์เอาต์ และลิสต์แบบเลื่อนยังแก้ไขได้ ในแผงตัวอย่างของเรา การ์ดแต่ละช่องจะมาเป็นรูปเดียวที่ทั้ง 12 การ์ดใช้ร่วมกัน สิ่งที่ต้องแลกคือแก้อาร์ตเวิร์กทีละชิ้นใน Studio ไม่ได้ กลุ่มที่มาเป็นรูปเดียวต้องกลับไปแก้ใน Figma แล้วส่งใหม่ ใช้กับ UI ส่วนใหญ่ได้ โดยเฉพาะปุ่ม แผง เมนู และ HUD ที่อาร์ตเวิร์กเป็นแค่ของตกแต่ง

Separate: ได้แผง การ์ด และลิสต์ที่แก้ไขได้ พร้อมชื่อตาม Figma ส่วนของตกแต่งที่ต้องอยู่ด้วยกันถึงจะดูถูกจะมาเป็นรูปเดียว ในแผงตัวอย่างของเรา การ์ดทุกช่องยังมีพื้นหลังมุมโค้ง gradient และขอบเป็นของตัวเอง เลยเปลี่ยนการ์ดใบหนึ่งให้เป็นสีทองได้เลยใน Studio สิ่งที่มักต้องแลกคือออบเจกต์และรูปที่มากกว่า Automatic (นับรวมในโควตา 1,000 รูปต่อการ Send), การ Send ที่มักนานกว่า, mask และ blend ที่อาจดูต่างไปเล็กน้อย (เช็ก Structure) และ tree ที่ต่างไปถ้า import ซ้ำดีไซน์ที่เคยส่งด้วยโหมดอื่น เหมาะกับหน้า inventory ร้านค้า และเมนูที่จะปรับสไตล์ใน Studio โดยไม่ต้องใช้เลเยอร์ตกแต่งทุกชิ้น

Preserve layers: ได้เลเยอร์ ชื่อ และลำดับการซ้อนตาม Figma พร้อมทำแอนิเมชันหรือเปลี่ยนสี ทุกอย่างที่ Roblox วาดได้จะเป็นออบเจกต์ที่แก้ไขได้ และมีแค่ส่วนที่เหลือที่มาเป็นรูป ในแผงตัวอย่างของเรา แม้แต่ปุ่มปิดยังมาเป็นชิ้นๆ เลยเปลี่ยนสีรูปเพชรหรือขยับตัว X แยกได้ สิ่งที่ต้องแลกคือ Send ครั้งแรกที่นานกว่า ออบเจกต์และรูปที่มักมากที่สุด (นับรวมในโควตา 1,000 รูปต่อการ Send), mask และ blend ที่อาจดูต่างไปเล็กน้อย (เช็ก Structure) และ tree ที่ต่างไปถ้า import ซ้ำดีไซน์ที่เคยส่งด้วยโหมดอื่น ใช้เฉพาะกับเฟรมที่จะแก้หรือทำแอนิเมชันใน Studio เช่น การ์ดตัวละคร ไอคอนที่เปลี่ยนสีได้ หรือฉากที่มีชิ้นส่วนเคลื่อนไหว

Native shadows and corners

On: รัศมีมุมยังแก้ไขได้ใน Studio เงาที่ทอดจากกล่องของเลเยอร์เองที่มี fill เช่น เงาของการ์ด จะยังเป็นเงาที่แก้ไขได้และไม่กินโควตารูป Roblox วาด blur ด้วยวิธีของตัวเอง เงาแบบนี้จึงอาจต่างจาก Figma เล็กน้อย ส่วนเงาที่ทอดจากเนื้อหาข้างในเลเยอร์ เช่น แสงเรืองรอบไอคอน วงแหวน หรือข้อความ จะมาเป็นรูปเดียววางไว้หลังเลเยอร์ที่ตรงกับ Figma และเลเยอร์ข้างในยังแก้ไขได้ รูปนี้นับรวมในจำนวนรูปต่อการ Send และจะไม่เปลี่ยนตามถ้าคุณแก้เลเยอร์ทีหลัง เฟรมที่คุณส่งจะใช้เงา native เสมอ และ Structure จะเตือนถ้ามันอาจดูเป็นกล่องสี่เหลี่ยม ให้ส่งเฟรมแม่ของมันแทนเพื่อให้ได้แสงเรืองเป็นรูป แนะนำให้เปิดไว้

Off: อาร์ตเวิร์กจะใช้รูปแทนเงาและมุม ซึ่งแลกกับการแก้ไขไม่ได้ ข้อความทั่วไปยังแก้ไขได้ เอฟเฟกต์ข้อความที่ไม่รองรับจึงอาจถูกตัดออกและแจ้งใน Structure ปิดเฉพาะเมื่อเงาที่เป๊ะสำคัญกว่าการแก้ไขได้ เช่น key art

Clean image edges (Pixfix)

On: ขอบโปร่งใสจะออกมาสะอาด ไม่มีขอบดำบนมุมโค้งหรือเงาฟุ้ง รูปที่ไม่ซ้ำกันแต่ละรูปจะถูกประมวลผลบนเซิร์ฟเวอร์ของ FigBloxUI ซึ่งทำให้ export ขนาดใหญ่ใช้เวลาเพิ่มอีกไม่กี่วินาที เปิดไว้สำหรับ Send รอบสุดท้าย

Off: เร็วกว่า และไม่มีการประมวลผล ใช้ระหว่างปรับงานได้สบายๆ

Offset และ Scaled

Offset: ขนาดตรงกับ Figma ทุกพิกเซล ผลลัพธ์จึงคาดเดาได้และจัดตำแหน่งใน Studio ได้ง่าย แต่จะไม่ปรับตามหน้าจอ: เลย์เอาต์อาจล้นบนจอเล็ก หรือดูเล็กไปบนจอใหญ่ ใช้กับองค์ประกอบเล็กๆ ที่ยึดกับขอบจอ (HUD, ปุ่ม, แถบสถานะ) และเมื่อจะกำหนดขนาดเองใน Studio

Scaled: ดีไซน์จะขยายตามหน้าจอและคงสัดส่วนไว้ แต่ไม่รับประกันขนาดเป็นพิกเซล ข้อความและไอคอนจึงเล็กลงบนจอเล็ก ใช้กับเมนูและหน้าที่ต้องเต็มจอบนอุปกรณ์หลายแบบ เช่น ร้านค้า หน้าการตั้งค่า และหน้าโหลด

Export as SurfaceGui

ใช้เฉพาะกับ UI ที่อยู่บน Part ในโลกของเกม เช่น จอในเกม ป้าย และบอร์ด เลือก Part ใน Studio ก่อนส่งเพื่อวาง UI ไว้บน Part นั้น ถ้าไม่เลือก ปลั๊กอินจะสร้าง Part ใหม่ไว้หน้ากล้อง แล้วค่อยย้ายไปวางตรงที่ต้องการ สำหรับ UI บนหน้าจอให้ปิดไว้

Image owner

Personal: ตั้งค่าได้เร็ว รูปจะเป็นของบัญชี Roblox ของคุณ ถ้าคุณออกจากทีม รูปก็จะไม่อยู่กับโปรเจกต์ต่อ เหมาะกับงานเดี่ยวและการทดลอง

Group: รูปจะเป็นของ Group และอยู่กับเกมต่อไปแม้สมาชิกจะเปลี่ยน role ของคุณใน Group ต้องได้รับสิทธิ์สร้าง development items และถ้าเปลี่ยนเจ้าของทีหลัง ต้อง export ใหม่และอัปโหลดสำเนาใหม่ของรูปทุกรูป เลือกตั้งแต่ Send ครั้งแรกสำหรับโปรเจกต์ทีมและเกมที่เผยแพร่ในนาม Group

เลือกแบบเร็ว

สถานการณ์	การตั้งค่า
กำลังปรับเลย์เอาต์ไปเรื่อยๆ	Automatic, Clean image edges off
Send รอบสุดท้ายของ UI ทั่วไป	Automatic, Clean image edges on, Native shadows and corners on
เมนู ร้านค้า หรือ inventory ที่จะปรับสไตล์ใน Studio	Separate, ตรวจ Structure ก่อนส่ง
เฟรมที่จะทำแอนิเมชันหรือเปลี่ยนสีใน Studio	Preserve layers, ตรวจ Structure ก่อนส่ง
key art ที่เงาต้องตรงกับ Figma	Automatic, Native shadows and corners off
เมนูเต็มจอ	Scaled
HUD และปุ่มที่ยึดกับมุมจอ	Offset