สร้างแอปที่ใช้งานได้จริงจากดีไซน์ใน Figma

ถ้าออกแบบแอปไว้ใน Figma แล้ว MonstarX สร้างแอปจากดีไซน์นั้นได้โดยตรง คุณจะได้แอปที่ใช้งานได้จริงและหน้าตาเหมือนหน้าจอที่ออกแบบไว้ ทั้งรูปภาพและไอคอนจริง สีและตัวอักษร และการนำทางตามโปรโตไทป์ พร้อมข้อมูล แบบฟอร์ม และระบบลงชื่อเข้าใช้ที่หน้าจอเหล่านั้นบ่งบอก

ต้องเตรียมอะไรบ้าง

ไฟล์ .fig ของดีไซน์ ใน Figma เปิดดีไซน์แล้วใช้ File → Save local copy… เพื่อบันทึกไฟล์ที่ MonstarX อ่านได้ ไฟล์ต้องเป็นไฟล์ Design ของ Figma ไม่รองรับบอร์ด FigJam และสไลด์ Figma Slides หากวางไฟล์เหล่านั้น MonstarX จะแจ้งให้ทราบ

สร้างจากไฟล์ Figma อย่างไร

1. ในหน้า โปรเจกต์ คลิก Figma ข้าง นำเข้า (มีอยู่ในเมนู นำเข้า ด้วย) หรือจะลากหรือวางไฟล์ .fig ลงบนช่องคำขอก็ได้

   

2. วางไฟล์ .fig หรือเลือกไฟล์ MonstarX จะอ่านไฟล์ในเบราว์เซอร์ของคุณ (“กำลังอ่านไฟล์…” “กำลังเปิดทุกหน้า…” “กำลังวาดหน้าจอ…”) และยังไม่มีอะไรถูกอัปโหลด

3. เลือกหน้าจอที่จะสร้าง ทุกหน้าในไฟล์จะแสดงเป็นรายการพร้อมภาพเฟรมขนาดเล็ก เฟรมที่ดูเหมือนหน้าจอจะถูกเลือกไว้แล้ว ส่วนหน้าที่ดูเหมือนองค์ประกอบสำหรับจัดระเบียบงาน (ปก ดีไซน์ซิสเต็ม คลังงานเก่า) จะถูกพับไว้และไม่ได้เลือก ใช้ ทำเครื่องหมายทั้งหมด หรือ ยกเลิกการเลือกทั้งหมด ได้ในแต่ละหน้า

4. ในช่อง แอปควรทำอะไรได้บ้าง (ไม่บังคับ) บอกสิ่งที่ดีไซน์แสดงไม่ได้ เช่น ใครเป็นคนใช้ ข้อมูลมาจากไหน และจะเกิดอะไรขึ้นเมื่อมีคนสมัครใช้งานหรือชำระเงิน

   

5. ตรวจดูโมเดลที่มุมซ้ายล่าง (เป็นโมเดลเดียวกับในช่องคำขอ เปลี่ยนตรงนี้ได้หากต้องการ)

6. กด สร้างแอปนี้ · 4 หน้าจอ หรือกด วางแผนก่อน เพื่อให้ MonstarX ศึกษาหน้าจอและถามเรื่องที่ดีไซน์แสดงไม่ได้ก่อนเริ่มสร้าง

หน้าจอจะถูกอัปโหลด (“กำลังอัปโหลดดีไซน์…”) โปรเจกต์จะถูกสร้างและตั้งชื่อตามไฟล์ แล้วงานสร้างแรกจะเริ่มขึ้น

MonstarX นำอะไรจากดีไซน์ไปใช้บ้าง

• ภาพของแต่ละหน้าจอ เอเจนต์ MonstarX จึงเห็นสิ่งที่คุณวาดไว้ทุกประการ และเทียบหน้าที่สร้างกับภาพนั้นไปตลอดระหว่างทำงาน
• คำอธิบายที่แม่นยำของแต่ละหน้าจอ ทั้งเลย์เอาต์ ระยะห่าง ข้อความทุกส่วนพร้อมฟอนต์และขนาด สี เส้นขอบ มุม และเงา
• รูปภาพและไอคอนของคุณ รูปภาพและไอคอนทุกชิ้นในดีไซน์จะกลายเป็นไฟล์ในแอป ไม่มีอะไรถูกแทนด้วยภาพสต็อก
• ดีไซน์ซิสเต็มของคุณ ตัวแปรสี (ทั้งโหมดสว่างและมืด) ตัวอักษร รัศมีมุม และเงา
• คอมโพเนนต์ ปุ่มที่ใช้ในสิบหน้าจอจะกลายเป็นคอมโพเนนต์เดียวในแอป
• ลิงก์ในโปรโตไทป์ ปลายทางของการแตะจะกลายเป็นการนำทางจริง

หน้าจอที่ชื่อซ้ำกัน (เช่น ชุดเฟรมที่ชื่อ “Desktop” ทั้งหมด) จะแยกกันด้วยคำแรก ๆ บนหน้าจอ คุณจึงรู้ว่าแต่ละหน้าจอคืออันไหน

เคล็ดลับ

สถานะต่าง ๆ ของหน้าเดียวกัน เช่น ตอนเปิดกล่องโต้ตอบ รายการว่าง หรือข้อผิดพลาด ส่งมาเป็นเฟรมแยกได้ MonstarX จะสร้างให้เป็นสถานะของหน้านั้น ไม่ใช่หน้าแยกกัน

แชทจะแสดงอะไร

คำขอแรกของคุณจะเขียนประมาณว่า “สร้างแอปนี้จากดีไซน์ Figma “bloom.fig” ของฉัน (4 หน้าจอ: หน้าต้อนรับ หน้าหลัก รายละเอียดต้นไม้ เพิ่มต้นไม้) ทำให้ดูเหมือนดีไซน์และใช้งานได้จริง” พร้อมแถบภาพหน้าจอด้านล่าง คลิกหน้าจอเพื่อดูขนาดเต็ม พร้อมขนาด หน้า และไฟล์ ระหว่างสร้าง แชทจะแสดงขั้นตอน เช่น “กำลังดูดีไซน์ของหน้าหลัก” และ “เปรียบเทียบ / กับดีไซน์ของหน้าหลักแล้ว”

เพิ่มหน้าจอทีหลังได้ไหม

ได้ ในแชทของโปรเจกต์ ลากมาวาง วาง หรือแนบไฟล์ .fig แล้วหน้าต่าง เพิ่มหน้าจอจาก Figma จะเปิดขึ้น เลือกหน้าจอใหม่ บอกว่าหน้าจอเหล่านั้นควรทำอะไร แล้วกด สร้างหน้าจอเหล่านี้ หน้าจอใหม่จะรวมเข้ากับดีไซน์ของโปรเจกต์และสร้างให้เข้ากับส่วนอื่นของแอป โปรเจกต์หนึ่งเก็บหน้าจอดีไซน์ได้สูงสุด 60 หน้าจอ

มีขีดจำกัดอะไรบ้าง

ขีดจำกัด	ค่า
หน้าจอต่องานสร้าง	ไม่เกิน 30 หน้าจอ
หน้าจอต่อโปรเจกต์	ไม่เกิน 60 หน้าจอ
รูปภาพและไอคอนต่อดีไซน์	ไม่เกิน 400 ไฟล์ และ 150 MB (ไฟล์ละ 8 MB)

ไฟล์ .fig ใหญ่ได้ถึง 250 MB แต่ไฟล์ที่ใหญ่มาก (เช่น ชุดดีไซน์ซิสเต็มทั้งชุด) อาจยังใหญ่เกินกว่าที่เบราว์เซอร์จะเปิดได้ ย้ายหน้าจอของแอปไปไว้ในไฟล์แยก โดยไม่มีหน้าดีไซน์ซิสเต็ม แล้วบันทึกสำเนาของไฟล์นั้นลงเครื่อง

คำถามที่พบบ่อย

วางลิงก์ Figma แทนไฟล์ได้ไหม

ในหน้าต่างนี้ไม่ได้ เพราะต้องอ่านไฟล์ .fig โดยตรง ใช้ File → Save local copy… ใน Figma (เครื่องมือออกแบบบางตัวส่งงานผ่าน เอเจนต์เขียนโค้ดของคุณ ได้ด้วย)

ดีไซน์ถูกอัปโหลดทันทีที่วางไฟล์ไหม

ไม่ ไฟล์จะถูกอ่านในเบราว์เซอร์ และจะอัปโหลดเฉพาะหน้าจอที่คุณเลือก เมื่อคุณกดสร้าง

แอปจะหน้าตาเหมือนดีไซน์ทุกประการไหม

นั่นคือเป้าหมาย เอเจนต์ MonstarX สร้างแต่ละหน้าจอจากค่าที่แม่นยำ และเทียบหน้าที่สร้างกับหน้าจอของคุณไปตลอดระหว่างสร้าง ชี้จุดที่ต่างได้ในแชท หรือแก้ด้วย โหมดแก้ไข

ดีไซน์มีแต่หน้าจอโทรศัพท์ แล้วบนคอมพิวเตอร์จะเป็นอย่างไร

ดีไซน์สำหรับโทรศัพท์จะสร้างเป็นคอลัมน์ตรงกลางบนหน้าจอกว้าง แอปจึงยังใช้งานบนคอมพิวเตอร์ได้

MonstarX บอกว่าไฟล์ของฉันไม่ใช่ไฟล์ Figma เพราะอะไร

ไฟล์อาจเป็นบอร์ด FigJam สไลด์ Figma Slides หรือไฟล์ .fig ของโปรแกรมอื่น เปิดดีไซน์ใน Figma แล้วใช้ File → Save local copy… เพื่อบันทึกเป็นไฟล์ Design ของ Figma

หน้าที่เกี่ยวข้อง

ออกแบบก่อนยังไม่มีดีไซน์ใช่ไหม เลือกหน้าตาจากหน้าจอที่วาดให้

วางแผนก่อนคำถามเกี่ยวกับสิ่งที่ดีไซน์แสดงไม่ได้

โหมดแก้ไขปรับหน้าตาอย่างละเอียดด้วยการคลิกบนหน้า

นำเข้าแอปมีโค้ดแทนดีไซน์ใช่ไหม