มีอะไรใหม่

อัปเดตที่กำลังจะมาถึง ซึ่งมาพร้อม ปลั๊กอิน Figma v63 และ ปลั๊กอิน Studio 3.0.0 เป็นอัปเดตครั้งใหญ่ที่สุดตั้งแต่เปิดตัว FigBloxUI หน้านี้พาทัวร์แบบสั้นๆ ส่วนรายละเอียดทุกบรรทัดอยู่ใน changelog

ก่อนส่ง

หลังอัปเดต ให้ทำสามอย่างนี้ครั้งเดียว:

1. ปิดแล้วเปิดปลั๊กอิน Figma ใหม่เพื่อให้โหลด v63 จากนั้นกด Logout แล้ว Login with Roblox ไลเซนส์และรูปที่อัปโหลดไว้จะยังอยู่ครบเหมือนเดิม
2. เลือก Image owner (Personal หรือ Roblox Group ใด Group หนึ่งของคุณ) ก่อน Send ครั้งแรกที่มีรูปในโหมด Code หรือ Live ปลั๊กอินจะจำตัวเลือกไว้
3. อัปเดตปลั๊กอิน Studio เป็น 3.0.0 (เปิด Auto Update ได้ที่ Plugins → Manage Plugins) Live ต้องใช้เวอร์ชันนี้ ส่วน Code และ ZIP ยังใช้กับเวอร์ชันเก่าได้

ฟีเจอร์ใหม่

Preserve layers

การตั้งค่าใหม่ชื่อ Artwork layers ใน Settings Automatic ยังเป็นค่าเริ่มต้น และยังให้ผล import ของ UI ทั่วไปที่เร็วและตรงกับดีไซน์ที่สุด เลือก Preserve layers เมื่ออยากแก้ไขหรือทำแอนิเมชันกับอาร์ตเวิร์กใน Studio: เลเยอร์และ container จาก Figma จะแยกกันมากขึ้นพร้อมชื่อและลำดับการซ้อน เลเยอร์ที่รองรับจะยังแก้ไขได้ ส่วนหน้าตาที่วาดเองไม่ได้และของตกแต่งบางกลุ่มจะมาเป็นรูป mask ที่เป็นวงกลมหรือมุมโค้งเท่ากันทุกมุมยังเป็น clip ที่แก้ไขได้ กลุ่มที่ใช้ blend และกลุ่มตกแต่งที่มี blur (แสงเรืองนุ่มๆ) จะมาเป็นรูปเดียวที่ตรงกับ Figma และ Structure จะชี้จุดที่ควรดูให้ก่อนส่ง ดูว่าควรใช้แบบไหนเมื่อไรได้ที่ เปรียบเทียบการตั้งค่า

Separate

ตัวเลือกที่สามของ Artwork layers อยู่ระหว่าง Automatic กับ Preserve layers พาเนล การ์ด และลิสต์ของคุณยังแก้ไขได้และใช้ชื่อตาม Figma อาร์ตเวิร์กแต่ละชิ้นที่แยกเป็นอิสระจะได้รูปของตัวเอง ส่วนของตกแต่งที่ต้องอยู่ด้วยกันถึงจะดูถูกต้อง เช่น แสงเรืองกับ mask ของมัน จะมาเป็นรูปเดียว ดู เปรียบเทียบการตั้งค่า

เลือกได้ว่าใครเป็นเจ้าของรูป

ที่ Image owner ในโหมด Code และ Live เลือกได้ว่าจะเป็น Personal หรือ Roblox Group ใด Group หนึ่งของคุณ รูปที่ส่งให้ Group จะเป็นของ Group นั้น โปรเจกต์ของทีมจึงยังมี asset ครบแม้สมาชิกจะเปลี่ยนไป กด Manage เพื่อเพิ่ม Group อื่นๆ ดูรายละเอียดที่ วิธีใช้งาน

ส่งได้สูงสุด 1,000 รูปต่อ Send

มากขึ้นเป็นสองเท่าจากเดิม และรูปเดียวกันที่ใช้ซ้ำหลายที่นับเป็นรูปเดียว ถ้าดีไซน์เกินลิมิต ปลั๊กอินจะแจ้งก่อนเริ่ม Send ใหญ่ๆ อัปโหลดได้เร็วขึ้น การอัปโหลดที่ใช้เวลานานก็เสร็จได้แน่นอนขึ้น และปลั๊กอินจะรอผลการตรวจรูปของ Roblox แล้วบอกว่ารูปไหนยังอยู่ระหว่างตรวจ

Structure tab โฉมใหม่

Structure อัปเดตทันทีที่คุณเปลี่ยน class ของเลเยอร์ กางดูได้เหมือน Explorer ของ Roblox บอกเหตุผลของทุกรูปและทุกจุดที่ต้องเช็ก และมีปุ่ม Fix สำหรับพื้นที่เลื่อนที่ยื่นเลยพาเนลออกไป (กด Reset เพื่อย้อนกลับ) นอกจากนี้ตอน Send ยังเตือนถ้าเลเยอร์เดียวกันจะไปโผล่สองครั้งใต้ parent เดียวกัน อ่านต่อที่ Structure tab

รายงานบั๊กจากในปลั๊กอิน

Report bug ในแท็บ Structure จะส่งโครงสร้างเลเยอร์ของ section นั้น พร้อมโน้ตและภาพหน้าจอของคุณ ตรงไปถึงทีม FigBloxUI และให้โค้ดไว้อ้างอิงบน Discord โดยไม่มีอะไรถูกโพสต์สาธารณะ ถ้าอยากแนบ activity log ไปกับรายงานบั๊ก ให้เอาเมาส์ไปวางบน log แล้วกด Copy log ดู ส่งฟีดแบ็ก

สีของ blend ตรงกับ Figma

อาร์ตเวิร์กที่ใช้ blend mode อย่าง Overlay หรือ Multiply จะถูกวาดทับสิ่งที่อยู่ข้างหลังมันแล้วในทุกโหมดของ Artwork layers สีจึงตรงกับใน Figma แม้จะวางอยู่บนพื้นหลังโปร่งใส ไม่ต้องเปิดตัวเลือกอะไรเพิ่ม ชิ้นที่ blend ไว้จะตรงกับพื้นหลังที่มันมีใน Figma ถ้าภายหลังคุณเปลี่ยนสีหรือซ่อนพื้นหลังนั้นใน Studio มันจะไม่ blend กับพื้นหลังใหม่ รูปทรง แถบ และเส้นคั่นบางๆ ที่ใช้ blend ตรงกับ Figma ในโหมด Automatic ด้วย ข้อความที่ใช้ blend ยังแก้ไขได้ สีที่รองรับจะตรงเมื่ออยู่บนพื้นสีทึบสีเดียว แต่ gradient กับ blend ที่ใช้ร่วมกันแล้วไม่รองรับจะคงสีเดิมพร้อมคำเตือนใน Structure Structure จะบอกเมื่อ blend ไหนมองไม่เห็นสิ่งที่อยู่ข้างหลัง พร้อมวิธีแก้ ดูบางกรณีที่ต้องใช้เคล็ดลับเพิ่มได้ที่ Artwork layers

Keep Both ได้ซ้ำหลายครั้ง

ถ้าเลือก Keep Both กับดีไซน์ที่เคย import ไปแล้ว ตอนนี้จะเพิ่มสำเนาใหม่ทุกครั้ง (Shop_copy แล้วตามด้วย Shop_copy2) และแต่ละสำเนาจะคงโหมด Offset หรือ Scaled ตามที่ export มา เมื่อเอาเมาส์ไปวางบนรูปในรายการรูปของปลั๊กอิน Studio จะมีกรอบบอกว่ารูปนั้นถูกใช้อยู่ตรงไหน

สิ่งที่ปรับปรุง

Import ได้แม่นยำขึ้น

• เลเยอร์ที่มีหลาย fill หรือหลายเส้นขอบยังแก้ไขได้ใน Studio และ texture ที่วางทับ gradient ก็ยังคงให้ gradient แก้ไขได้
• พาเนลที่มี fill แบบ blend ยังคงการ์ด เส้นขอบ และมุมโค้งที่แก้ไขได้ไว้ เฉพาะส่วนที่ต้องใช้ blend เท่านั้นที่กลายเป็นรูป
• พื้นหลังไอคอนทรงกลม รูปทรงที่ตั้ง corner radius แยกแต่ละมุม และมุมที่ใช้ corner smoothing ยังคงขอบโค้งไว้
• drop shadow เป็นรูปทรงตามสิ่งที่ทอดเงา เหมือนใน Figma: แสงเรืองบนกลุ่มหรือเฟรมที่อยู่รอบไอคอน วงแหวน หรือข้อความ จะมาเป็นรูปเงานุ่มๆ วางไว้หลังเลเยอร์ที่ยังแก้ไขได้ และอยู่นอก clip กับเลย์เอาต์
• drop shadow แบบขอบคมบนข้อความจะมาเป็นสำเนาเงาที่ตรงกันวางไว้หลังข้อความ
• ข้อความที่ผสมหลายฟอนต์จะ import โดยแต่ละฟอนต์อยู่ในตำแหน่งของมัน และยังคงตัวพิมพ์ใหญ่ title case และขนาดตัวอักษรไว้
• ข้อความยังแก้ไขได้แทบทุกกรณี รวมถึงอีโมจิ ข้อความที่เอียง mask เอฟเฟกต์ และ _gray และ Structure จะบอกทุกจุดที่ Roblox วาดต่างไปเล็กน้อย ข้อความจะกลายเป็นรูปก็ต่อเมื่อตั้งชื่อเลเยอร์ข้อความด้วย _image, _ImageLabel หรือ _ImageButton หรือใช้ข้อความใน boolean shape หรือเป็น mask
• รูปทรง Boolean ยังคงส่วนที่เจาะออกและหน้าตาที่รวมกันไว้ และรูปทรงที่เอียงก็ยังเอียงเหมือนเดิม
• แถวของไอเท็มตกแต่งที่เหมือนกันตั้งแต่หกชิ้นขึ้นไปจะ import แต่ละชิ้นครั้งเดียวในตำแหน่งของมัน และกลุ่มอาร์ตเวิร์กที่มีเลเยอร์ซ่อนอยู่ก็ยัง import มาพร้อมรูปของมัน

การเลื่อนและกริด

• พื้นที่เลื่อนที่มีการ์ดขนาดเท่ากันซึ่งจัดวางเองเป็นกริดเท่าๆ กัน จะ import มาเป็นกริดจริง การ์ดที่เพิ่มใน Studio จึงเลื่อนตามได้ด้วย
• กริดที่เลื่อนได้จะเผื่อพื้นที่ให้เส้นขอบการ์ด กริดของการ์ดที่มี mask วางชิดกันพอดี และกริดที่พอดีกับพื้นที่อยู่แล้วจะไม่เลื่อนอีก
• พื้นที่เลื่อนที่ตั้งชื่อด้วย _ScrollingFrame หรือ _scroll และถูก clip ด้วย mask มุมโค้งหรือวงกลมจะยังมีขอบโค้งในทุกโหมดของ Artwork layers และทุกอย่างข้างในยังแก้ไขได้และเลื่อนได้ ดู เคล็ดลับ ScrollingFrame
• เมื่อใช้ปลั๊กอิน Studio 3.0.0 กริดปุ่มในโหมด Offset จะมีคอลัมน์ครบตาม Figma

Images panel

• รูปจะทยอยขึ้นระหว่างที่ Send หรือ export กำลังทำงาน แล้วแสดงให้เห็นชัดว่ารูปไหนถูกส่งไปบ้าง
• ถ้าส่งซ้ำขณะที่ปลั๊กอินยังเปิดอยู่ รูปที่ไม่เปลี่ยนจะถูกใช้ซ้ำ Send ครั้งถัดไปจึงเร็วขึ้น
• Preview โหลดเร็วขึ้นในดีไซน์ใหญ่ และอยู่ที่เดิมเมื่อสลับระหว่าง Live, Code และ ZIP ถ้าขยายหน้าต่างให้สูงขึ้น พื้นที่ที่เพิ่มมาจะไปอยู่ที่ images panel

หน้าต่างปลั๊กอิน

• FigBloxUI จะพักการทำงานเมื่อหน้าต่างอยู่เบื้องหลัง และรีเฟรช preview เมื่อคุณกลับมา
• หัวข้อ Settings และปุ่มปิดจะอยู่บนจอตลอดขณะเลื่อนดูการตั้งค่า

บัญชีและการล็อกอิน

• ข้อความตอน export บอกว่าเกิดอะไรขึ้นและต้องกดอะไรต่อ และคำแนะนำเรื่องการเชื่อมต่อ Studio จะชี้ไปที่การตั้งค่าที่ถูกต้อง
• ถ้าเปิด FigBloxUI ไว้ในหลายไฟล์ Figma การล็อกอินใหม่หรือ Manage ในหน้าต่างหนึ่งจะส่งต่อไปยังหน้าต่างอื่นด้วยเมื่อเป็นบัญชี Roblox เดียวกัน ทุกหน้าต่างจึงส่งต่อได้ไม่สะดุด

Export ปลอดภัยขึ้น

Export จะเก็บกวาดเลเยอร์ชั่วคราวของตัวเอง แม้ปลั๊กอินจะปิดไประหว่าง export และจะคืนค่า clipping และการซ่อน/แสดงของดีไซน์ให้เหมือนเดิมทุกอย่าง ถ้าคุณแก้สำเนาชั่วคราวระหว่างที่รูปกำลังเรนเดอร์ ปลั๊กอินจะเก็บสำเนานั้นไว้และแสดงในรายการพร้อม Show layer และ Check again ส่วน Remove copy… จะลบสำเนาที่ค้างอยู่ให้ และยังกด Undo ใน Figma ได้

ควรรู้ไว้

• รูปที่อัปโหลดให้ Group จะแสดงเฉพาะใน experience ที่ Group นั้นเป็นเจ้าของ ถ้าใช้ใน experience อื่น Studio จะขอให้แชร์สิทธิ์เข้าถึงหนึ่งครั้ง
• ถ้าสลับ Artwork layers แล้วรูปดูผิดไป ให้ปิดแล้วเปิดปลั๊กอินใหม่ จากนั้นส่งอีกครั้ง
• รอให้ Send เสร็จก่อนค่อยแก้ดีไซน์ เพราะถ้าแก้ระหว่างที่ตัวเองกำลัง Send อยู่ การแก้นั้นอาจหายได้