FigBloxUIFigma เป็น Roblox UI ในไม่กี่วินาที

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

ติดตั้งปลั๊กอิน Figma ติดตั้งปลั๊กอิน Studio

ติดตั้งปลั๊กอิน Studio อ่านวิธีติดตั้ง ดูว่ามีอะไรใหม่ใน v63

การ Send จริงจาก Figma เข้า Roblox Studio UI โดย ang3lzUI
ใหม่ใน v63

อัปเดตใหญ่ที่สุดตั้งแต่เปิดตัว

อ่านสิ่งที่ใหม่ใน v63

  • Preserve layers อาร์ตเวิร์กเข้ามาเป็นชิ้นที่แก้ได้ ไม่ใช่รูปแบนรูปเดียว
  • Separate แผง การ์ด และลิสต์ยังแก้ได้ ส่วนของตกแต่งที่ต้องอยู่ด้วยกันจะมาเป็นรูปเดียว
  • Image owner อัปโหลดเข้าบัญชีตัวเอง หรือเข้า Roblox Group ของคุณก็ได้
  • สูงสุด 1,000 รูปต่อการ Send รูปเดียวกันที่ใช้ซ้ำนับเป็นรูปเดียว
  • Structure tab พร้อมปุ่ม Fix ดูโครงสร้างก่อนส่ง และแก้พื้นที่เลื่อนที่ใหญ่เกินได้ในคลิกเดียว
  • Keep Both ได้ซ้ำหลายครั้ง ทุกการ import วางข้างชุดก่อนได้เสมอ
ทำงาน
อย่างไร
01

เลือกเฟรม

เปิด FigBloxUI ใน Figma แล้วเลือกเฟรมที่ต้องการ export

02

เลือกโหมด

ส่งตรงด้วย Live ส่งต่อเป็น Code หรือดาวน์โหลด ZIP โดยไม่ต้องล็อกอิน Roblox

03

นำเข้าใน Studio

ใช้ปลั๊กอิน Studio นำเข้า ตรวจโครงสร้าง UI แล้วแก้ต่อได้เลย

ส่งได้สามแบบ

Live, Code หรือ ZIP เลือกแบบที่เหมาะกับวันนี้ แล้วเปลี่ยนได้ทุกเมื่อ

แปลงแบบเดียวกัน ส่งได้สามทาง ส่งตรงเข้า Studio ระหว่างปรับงาน ส่งโค้ดให้เพื่อนในทีม หรือ export เป็น ZIP โดยไม่ต้องล็อกอิน Roblox เลย

ใช้บ่อยที่สุด

Live

กด Send แล้ว UI ขึ้นใน Studio ในไม่กี่วินาที รูปอัปโหลดแล้ว เลย์เอาต์เข้าที่

  1. เลือกเฟรมใน Figma
  2. คลิก Send to Roblox
  3. แก้ต่อใน Studio ได้เลย
ต้องมีล็อกอิน Robloxเชื่อมปลั๊กอิน Studio แล้ว
สำหรับทีม

Code

คัดลอกโค้ดก้อนเดียวที่มี image ID อยู่ในนั้นแล้ว ใครในทีมก็วางลง Studio ของตัวเองได้

  1. Export แล้วกด Copy Code
  2. วางในปลั๊กอิน Studio
  3. โครงสร้างสร้างเอง รูปจับคู่ให้ครบ
ต้องมีล็อกอิน Roblox เพื่ออัปโหลดรูปตอน export ไม่ต้องเปิด Studio
ไม่ต้องล็อกอิน

ZIP

ดาวน์โหลด UI และรูปทั้งหมดเป็นไฟล์ เหมาะกับงานรับจ้างและการส่งมอบงานที่ไม่ต้องล็อกอินเลย

  1. Export เป็น ZIP ไม่ต้องมีบัญชี
  2. อัปโหลดรูปผ่าน Asset Manager
  3. วางโค้ด กด Scan แล้ว import
ต้องมีไม่ต้องล็อกอินอะไรเลยปลั๊กอิน Studio สำหรับ import
ความเร็ว

กด Send ปุ๊บ อยู่ใน Studio ปั๊บ

ถ่ายจริงสามรอบกับ HUD เดียวกัน จับเวลาตั้งแต่คลิกแรก Live เข้า Roblox Studio ใน 16.3 วินาที Code ที่คัดลอกไปวางในปลั๊กอิน Studio ใช้ 22.0 วินาที ส่วนทาง ZIP แบบทำเองที่อัปโหลด 25 รูปผ่าน Asset Manager ใช้ 77.3 วินาที

นาฬิกาจับเวลาเป็นเวลาจริง Live และ Code เป็นการส่งซ้ำ รูปจึงอยู่บน Roblox อยู่แล้ว UI โดย ang3lzUI
ทำมาเพื่อการแก้งานซ้ำ

แก้แล้วนำเข้าใหม่ได้เลย

เลือกโหมดขนาด ใช้รูปที่อัปโหลดแล้วซ้ำได้ และเลือกได้ว่า UI ที่ตรงกันใน Studio จะอัปเดตอย่างไร

ความแม่นยำ

ส่งออกแบบ Offset และ Scaled

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

โครงสร้างจริง

อินสแตนซ์ Roblox ที่แก้ได้

Auto Layout, Grid, Wrap, RichText, UIStroke, gradient, มุมโค้ง, UIShadow, ScreenGui และ SurfaceGui ใช้งานต่อได้ครบ

รูปภาพ

ตัดรูปซ้ำและขอบรูปสะอาด

รูปที่เหมือนกันใช้ร่วมกัน จับคู่ asset เข้า Studio ให้ และ Clean image edges ช่วยให้ขอบโปร่งใสไม่มีขอบดำ

นำเข้าอย่างปลอดภัย

Replace, Keep Both หรือรวมกัน

ตัดสินใจเรื่อง ScreenGui ชื่อซ้ำก่อนที่อะไรจะเปลี่ยน หรืออัปเดตเฉพาะส่วนที่ตรงกัน โดยงานอื่นใน Studio อยู่ที่เดิม

เปรียบเทียบ

งานเดียวกัน วัดสองแบบ

สร้างใหม่ด้วยมือต้องเสียอะไรบ้าง และ FigBloxUI อยู่ตรงไหนเมื่อเทียบกับวิธีอื่นในการย้าย UI จาก Figma เข้า Roblox

ทำเอง vs FigBloxUI

แต่ละขั้นเสียแรงแค่ไหน ถ้าสร้างดีไซน์ใน Studio เอง

ทำเอง vs FigBloxUI
งาน ทำเอง FigBloxUI
UI ง่ายๆ (ปุ่มไม่กี่ปุ่ม)~2 ชั่วโมงคลิกเดียว
UI ซับซ้อน (187 อินสแตนซ์)ครึ่งวันขึ้นไปไม่ถึงนาที
อัปโหลด 68 รูปExport, อัปโหลด, วาง ID × 68อัตโนมัติ
ปรับขนาดและตำแหน่งคำนวณ UDim2 เองแปลงตรงพิกเซล
อัปเดตหลังแก้ดีไซน์สร้างใหม่เกือบทั้งหมดกด Send อีกครั้ง
แก้อาร์ตเวิร์กหลัง importExport ทั้งรูปใหม่Preserve layers ทำให้ทุกอย่างที่ Roblox วาดได้ยังแก้ได้
Blend mode (Overlay, Multiply…)Roblox ไม่มีให้ ต้องวาดรูปใหม่สีตรงกับ Figma
ตัดรูปตามทรงมุมโค้งทำ clip ใหม่ทีละอันเองตัดให้เลย และยังแก้ได้ใน Separate และ Preserve layers
เทียบกับปลั๊กอินอื่น

FigBloxUI อยู่ตรงไหน เมื่อเทียบกับวิธีอื่นในการย้าย UI จาก Figma เข้า Roblox

เทียบกับปลั๊กอินอื่น
ฟีเจอร์ ที่อื่น FigBloxUI
อัปโหลดรูปอัตโนมัติบางตัวอัปโหลดให้ บางตัวต้องใช้ Asset Managerไม่ต้องทำอะไรเลย
คลิกเดียวเข้า StudioExport, คัดลอก หรือวางกด Send จบ
ขึ้นใน Studio ทันทีบางตัว ผ่านโค้ดที่ต้องวางได้
UIGradientแล้วแต่ตัวได้
UICorner / UIStrokeแล้วแต่ตัวได้
เงาและมุมแบบ nativeแบนเป็นรูป หรือทำเองแบบ native เมื่อรองรับ แสงเรืองจากเนื้อหาใช้รูป
อาร์ตเวิร์กยังแก้ได้ทีละเลเยอร์แบนเป็นรูป หรือต้องติดแท็กทีละเลเยอร์เลือก Automatic, Separate หรือ Preserve layers ได้เลย จะติดแท็กเพิ่มก็ได้ถ้าต้องการ
Blend mode (Overlay, Multiply…)แล้วแต่ตัวสีตรงกับ Figma
รูปที่เป็นของ Groupบัญชีส่วนตัว หรืออัปโหลดเองPersonal หรือ Roblox Group
Rich Textบางตัวได้
ตรวจจับปุ่มอัตโนมัติทำเองหรือไม่มีอัตโนมัติ
จำนวนรูปต่อการ Sendมักจำกัดที่ 15 ถึง 30สูงสุด 1,000
ตรวจก่อนส่งทำเองหรือไม่มีStructure tab พร้อม Fix
ราคาฟรีถึง $12.99 ต่อเดือน$5 ต่อเดือน
คุ้นๆ ไหม?

ทำไมคนถึงตามหาเครื่องมือแบบนี้

แปลจากสิ่งที่นักพัฒนา Roblox โพสต์ไว้บน DevForum เรื่องการย้าย UI จาก Figma

"import UI จาก Figma เข้า Roblox ใช้เวลานานมาก น่าเบื่อสุดๆ... ยังเหลืออีกเป็นล้านเฟรม"

Roblox DevForum

"หลัง import ยังไงก็ต้องมานั่งปรับฟอนต์ สี สเกล และอัตราส่วนเองอยู่ดี"

Roblox DevForum

"UI เบลอตอน import ด้วย ImageLabel... พอพยายามให้พอดีก็ยืดเสียรูป"

Roblox DevForum

"export ทีละชิ้นไม่ใช่แค่เสียเวลา ชิ้นใหญ่ๆ ยังคุณภาพตกเพราะติดขีดจำกัดความละเอียด 1024x1024"

Roblox DevForum

"ตอนนี้การ import งาน 2D จากอย่าง Figma เข้า Roblox ยาก น่าหงุดหงิด และเสียเวลาเกินไป"

Roblox DevForum Feature Request

"ระยะที่คำนวณมาอย่างดีผิดหมด ความสูงแต่ละชิ้นไม่เท่ากัน... ใช้เวลาแก้มากกว่าออกแบบอีก"

Roblox DevForum Feature Request

แชร์เคสทดสอบจริง

ถ้าอยากโชว์ Roblox UI ของคุณ และให้เราใช้ทดสอบการ export ของ FigBloxUI ทักมาได้ที่ Discord

ราคา

ลองกับ UI จริงก่อน

ติดตั้งปลั๊กอินทั้งสองตัว แล้วลองส่งเฟรม Figma จริงดูทั้งขั้นตอน สมัครเมื่อมันเข้ากับงานของคุณแล้วเท่านั้น

ใช้ฟรี 14 วัน
ทดลองใช้ไม่ต้องใช้บัตรเครดิต
เริ่มทดลองใช้ฟรี
บัตรเครดิต
$5/เดือน
Robux ใช้ได้แล้ว
Robux2,500/เดือน
เปิดร้าน Robux
ได้อะไรบ้าง

ของดีทั้งหมด ดูได้ในที่เดียว

แปลง

  • Preserve layers ใหม่แยกเลเยอร์และกล่องจาก Figma ไว้มากขึ้นพร้อมชื่อเดิม หน้าตาที่ไม่รองรับและของตกแต่งบางส่วนใช้รูป
  • Separate ใหม่แผง การ์ด และลิสต์ยังแก้ได้พร้อมชื่อจาก Figma อาร์ตเวิร์กแต่ละชิ้นได้รูปของตัวเอง ส่วนของตกแต่งที่ต้องอยู่ด้วยกันถึงจะสวยจะมาเป็นรูปเดียว
  • เงาและมุมแบบ nativeเงาและมุมที่รองรับยังแก้ได้ แสงเรืองจากเนื้อหาใช้รูปที่ไม่เปลี่ยนตามเมื่อแก้เลเยอร์
  • Rich Text, UIStroke, gradientฟอนต์ผสม เส้นขอบ และสีพื้นเข้ามาเป็น property จริง
  • Offset หรือ Scaledตรงพิกเซล หรือปรับตามจอโดยคงอัตราส่วน
  • ScreenGui หรือ SurfaceGuiบนหน้าจอ หรือบน Part ในโลกเกม

รูปภาพ

  • สูงสุด 1,000 รูปต่อการ Send ใหม่อัปโหลดให้เลย รูปเดียวกันที่ใช้ซ้ำนับเป็นรูปเดียว
  • Image owner ใหม่บัญชีของคุณหรือ Roblox Group เพื่อให้ asset ของทีมอยู่กับเกม
  • ตัดรูปซ้ำอัตโนมัติอัปโหลดครั้งเดียว ใช้ร่วมกันทุกชิ้นที่ใช้รูปนั้น
  • Clean image edgesไม่มีขอบดำรอบมุมโค้งและขอบนุ่ม
  • แกลเลอรี สแกน และลากสแกนอัตโนมัติตอนวาง ลากรูปข้ามแถว เปลี่ยนรูปและย้อนกลับได้

ตรวจและแก้ซ้ำ

  • Structure tabเห็นโครงสร้างจริงก่อนส่ง พร้อม Fix สำหรับพื้นที่เลื่อนที่ใหญ่เกิน
  • Keep Both, Replace หรือ Cancelimport ชื่อซ้ำไม่มีเซอร์ไพรส์ กด Keep Both อีกครั้งก็ได้อีกชุด
  • History tabโหลด import แบบ Code หรือ ZIP ล่าสุดกลับมาได้ในคลิกเดียว
  • ชี้และปักไฮไลต์ดูว่ารูปแต่ละรูปถูกใช้ตรงไหนในโครงสร้าง
  • Report bugส่งโครงสร้างเลเยอร์ถึงเราได้ตรงจากปลั๊กอิน

ส่งงาน

  • Liveตรงเข้า Studio ที่เชื่อมไว้ ในไม่กี่วินาที
  • Codeโค้ดก้อนเดียวให้วาง มี image ID ในตัว ใช้ได้ทั้งทีม
  • ZIPไฟล์ล้วน ไม่ต้องล็อกอิน Roblox เหมาะกับงานรับจ้าง
  • แปลงได้สองทางScreenGui เป็น SurfaceGui และกลับกัน ใน Studio
  • suffix _grayไอคอนที่เปลี่ยนสีได้ใน Studio