การตั้งชื่อเลเยอร์

เติม suffix ต่อท้ายชื่อเลเยอร์ไหนก็ได้ใน Figma เพื่อกำหนดเองว่าเลเยอร์นั้นจะกลายเป็นคลาสอะไรใน Roblox ถ้าตั้ง Artwork layers เป็น Automatic ซึ่งเป็นค่าเริ่มต้น FigBloxUI จะตัด suffix ออกให้ อินสแตนซ์ใน Roblox จึงได้ชื่อที่สะอาด ถ้าใช้ Separate หรือ Preserve layers อินสแตนซ์จะใช้ชื่อเลเยอร์เต็ม ๆ รวม suffix ด้วย

ถ้าเคยใช้ปลั๊กอิน Figma-to-Roblox ตัวอื่นมาก่อน ชื่อเลเยอร์ที่ตั้งไว้แล้วก็ใช้กับ FigBloxUI ได้ทันที ไม่ต้องเปลี่ยนชื่ออะไรเลย

ตัวอย่าง: เลเยอร์ชื่อ Submit_TextButton จะกลายเป็น TextButton ชื่อ Submit ใน Roblox

Suffix สำหรับคลาส

Suffix	แบบย่อ	คลาสใน Roblox
_frame		Frame
_textlabel		TextLabel
_textbutton	_button	TextButton
_textbox	_box	TextBox
_imagelabel	_image	ImageLabel
_imagebutton	_button	ImageButton
_scrollingframe	_scroll	ScrollingFrame
_viewportframe	_vpf	ViewportFrame
_canvasgroup	_canvas	CanvasGroup

_button ใช้การตรวจจับอัตโนมัติ: ถ้าเลเยอร์มีข้อความเป็นลูกจะกลายเป็น TextButton ถ้าไม่มีจะเป็น ImageButton

ข้อความทั่วไปจะยังเป็นข้อความที่แก้ไขได้ ส่วนข้อความที่อยู่ใน boolean shape หรือถูกใช้เป็นตัว mask เองจะเป็นส่วนหนึ่งของรูปที่ส่งออก suffix ของ container ที่ใส่ไว้ (_frame, _scrollingframe, _canvasgroup, _viewportframe และแบบย่อของมัน) จะไม่มีผล และ Structure จะบอกให้รู้ ส่วน suffix ของรูป (_image, _imagelabel, _imagebutton) ยังเปลี่ยนข้อความให้เป็นรูปได้

ในโหมด Automatic และ Separate ถ้าเติม suffix ของรูป (_image, _imagelabel, _imagebutton) ให้กลุ่มหรือเฟรม ทั้งกลุ่มนั้นจะถูก export เป็นรูปเดียว เช่น Background_image โดยข้อความในกลุ่มจะยังเป็นข้อความที่แก้ไขได้อยู่บนรูปนั้น ส่วนเลเยอร์ข้อความที่ตั้งชื่อด้วย _image, _ImageLabel หรือ _ImageButton จะกลายเป็นรูปเอง เป็นวิธีที่เร็วที่สุดในการยุบกลุ่มของตกแต่งที่มีรายละเอียดเยอะให้เหลือการอัปโหลดแค่รูปเดียว เวลาที่ดีไซน์ใกล้ถึงเพดาน 1,000 รูปต่อการ Send หนึ่งครั้ง ส่วนใน Preserve layers suffix เดียวกันนี้มักจะเก็บเลเยอร์ไว้ในกลุ่มตามเดิม (กลุ่มอาร์ตเวิร์กที่มี blend mode หรือ blur ของตัวเอง กลุ่มที่มี mask ซึ่ง Roblox ทำซ้ำไม่ได้ หรือกลุ่มหรือเฟรมอาร์ตเวิร์กที่หมุนอยู่และมี blend อยู่ข้างใน ยังอาจกลายเป็นรูปเดียวได้) จึงช่วยประหยัดจำนวนรูปได้แค่ใน Automatic และ Separate

_scrollx ก็ใช้เป็น suffix แบบย่อสำหรับ ScrollingFrame แนวนอนได้ ส่วน _scrolly ใช้กับแนวตั้งแบบเดียวกัน

เคล็ดลับ ScrollingFrame

• ตั้งขนาดเฟรมให้เท่ากับ หน้าต่างที่มองเห็น ที่ต้องการ ไม่ใช่ขนาดของเนื้อหาทั้งหมด อะไรที่ยื่นเกินเฟรมออกไปจะกลายเป็น canvas ที่เลื่อนได้
• จะเปิดใช้โดยไม่เปลี่ยนชื่อก็ได้: ตั้ง Scroll behavior > Overflow ในแผง Prototype ของ Figma
• _scroll, _scrollx และ _scrolly จะบังคับให้เป็นลิสต์เลย์เอาต์ทิศทางเดียว ถ้าเป็นกริดให้ใช้ _scrollingframe จำนวนคอลัมน์จะได้คงเดิม
• ถ้าใช้กับ Repeat group การเปิดให้เลื่อนจะเก็บทุกสำเนาที่กำหนดไว้ครบ แถวที่ซ่อนอยู่หลัง mask จึงเลื่อนเข้ามาให้เห็นได้ แทนที่จะถูกตัดทิ้ง
• ถ้าอยากให้พื้นที่เลื่อนมีมุมโค้ง ให้ตั้งชื่อด้วย _ScrollingFrame หรือ _scroll ให้มันตั้งตรงและไม่มี auto layout ของตัวเอง แล้วใช้ mask ขนาดเท่าเฟรมเป็นเลเยอร์แรก: สี่เหลี่ยมมุมโค้งที่รัศมีเท่ากันทุกมุม หรือวงกลม ที่มี fill ทึบ เนื้อหาจะยังแก้ไขได้และเลื่อนอยู่ในขอบโค้งนั้นในทุกโหมดของ Artwork layers

เลย์เอาต์ไม่ต้องใช้ suffix

UIListLayout และ UIGridLayout จะถูกสร้างให้อัตโนมัติจากเลย์เอาต์ที่ใช้ใน Figma: Auto Layout (แนวตั้งหรือแนวนอน) จะกลายเป็น UIListLayout และเลย์เอาต์ Grid หรือ Wrap ของ Figma จะกลายเป็น UIGridLayout ส่วน scrolling frame ที่ไม่ได้ใช้เลย์เอาต์ของ Figma จะได้เลย์เอาต์ที่เดาให้เมื่อไอเท็มข้างในเรียงกันอย่างสม่ำเสมอ: ถ้าเรียงเป็นคอลัมน์เดียวจะได้ UIListLayout และถ้าเป็นการ์ดที่เว้นระยะเท่า ๆ กันเป็นแถวและคอลัมน์จะได้ UIGridLayout การ์ดที่เพิ่มทีหลังจึงไหลเข้าไปในกริด และ canvas ก็ขยายตาม แค่ตั้งเลย์เอาต์ใน Figma ตามปกติ ปลั๊กอินจะเลือกตัวที่เหมาะให้เอง

Suffix สำหรับเลย์เอาต์

Suffix	ใช้สำหรับ
_uilist	บังคับให้คอนเทนเนอร์ใช้ UIListLayout
_uigrid	บังคับให้คอนเทนเนอร์ใช้ UIGridLayout

วาง suffix เลย์เอาต์ไว้หน้า suffix คลาสได้ เช่น Items_uigrid_frame

Suffix ปรับแต่งรูป

Suffix	ใช้สำหรับ
_gray	mask รูปหรือไอคอนที่เปลี่ยนสีได้

_gray จะ export เลเยอร์เป็น mask PNG สีขาวโดยเก็บความโปร่งใสไว้ แล้วใส่สี fill หรือ stroke จาก Figma ผ่าน ImageColor3 ของ Roblox เหมาะกับไอคอนที่อยากให้คมชัดและเปลี่ยนสีใน Studio ได้ง่าย ถ้าเป็นเลเยอร์ข้อความ _gray จะเก็บข้อความไว้ให้แก้ไขได้ในสีของตัวเอง ให้เปลี่ยนสีด้วย TextColor3 แทน

วาง _gray ไว้หน้า suffix คลาสรูปได้ เช่น Star_gray_image

Suffix สำหรับข้ามเลเยอร์

เติม suffix เหล่านี้เพื่อข้ามเลเยอร์ตอน export:

• _exclude: ข้ามเลเยอร์นี้ไปทั้งหมด
• _ignore: เหมือน _exclude
• _lock: ข้ามการ export + คงสัดส่วนภาพไว้ (เพิ่ม UIAspectRatioConstraint)

ทำงานยังไง

1. FigBloxUI เช็กชื่อเลเยอร์ว่ามี suffix ที่ตรงกันไหม (เช็ก suffix ที่ยาวกว่าก่อน)
2. ถ้าเจอ suffix จะใช้ suffix นั้นกำหนดคลาสใน Roblox
3. ในโหมด Automatic suffix จะถูกตัดออกจากชื่ออินสแตนซ์สุดท้าย ส่วน Separate และ Preserve layers จะเก็บไว้
4. ถ้าไม่เจอ suffix FigBloxUI จะเลือกคลาสให้อัตโนมัติตามชนิดของโหนดใน Figma

Separate และ Preserve layers

ถ้าตั้ง Artwork layers เป็น Separate หรือ Preserve layers ใน Settings อินสแตนซ์ใน Roblox จะใช้ชื่อเลเยอร์จาก Figma ตรงตามที่ตั้งไว้รวม suffix ด้วย และเฟรมบนสุดจะใช้ชื่อของตัวเองแทน Container ส่วน suffix คลาสยังใช้เลือกคลาสได้ตามปกติ ใน Preserve layers กลุ่มหรือเฟรมที่มี suffix _ImageLabel หรือ _ImageButton มักจะเก็บเลเยอร์ไว้ข้างในแทนที่จะกลายเป็นรูปเดียว (กลุ่มอาร์ตเวิร์กที่มี blend mode หรือ blur ของตัวเอง กลุ่มที่มี mask ซึ่ง Roblox ทำซ้ำไม่ได้ หรือกลุ่มหรือเฟรมอาร์ตเวิร์กที่หมุนอยู่และมี blend อยู่ข้างใน ยังอาจกลายเป็นรูปเดียวได้) และเลเยอร์ _stroke จะยังเป็นเลเยอร์แยก ส่วนใน Separate กลุ่มแบบนั้นจะกลายเป็นรูปเดียว และเลเยอร์ _stroke ทำงานเหมือนใน Automatic

เคล็ดลับ

• Suffix ไม่สนตัวพิมพ์เล็กใหญ่: _TextButton, _textbutton และ _TEXTBUTTON ใช้ได้หมด
• ใช้ร่วมกับชื่อที่ตั้งไว้ใน Figma ได้เลย: Header Bar_frame จะกลายเป็น Frame ชื่อ Header Bar
• ใส่ _exclude ให้เลเยอร์ตัวช่วย (ไกด์ โน้ต) เพื่อจัดไฟล์ Figma ให้เป็นระเบียบ โดยไม่ทำให้ผลลัพธ์ที่ export ไป Roblox รก