ตัวแก้ไขแคนวาส
แคนวาสแก้ไขไวร์เฟรมเป็นที่ที่คุณออกแบบและปรับแต่งหน้าจอ แถบด้านข้างซ้ายมีเครื่องมือวาดและเลือกทั้งหมด ตรงกลางเป็นแคนวาสที่คุณวางและจัดเรียงองค์ประกอบ และแถบด้านข้างขวาแสดงคุณสมบัติขององค์ประกอบที่เลือก
เครื่องมือ
เลือก
คลิกเพื่อเลือกและย้ายองค์ประกอบบนแคนวาส องค์ประกอบที่เลือกจะแสดงคุณสมบัติในแถบด้านข้างขวา
สี่เหลี่ยม
วาดองค์ประกอบคอนเทนเนอร์สี่เหลี่ยมบนแคนวาส
วงกลม
วาดองค์ประกอบวงกลมบนแคนวาส
ข้อความ
เพิ่มป้ายข้อความและบล็อกเนื้อหา
รูปภาพ
วางองค์ประกอบตัวแทนรูปภาพ
ปุ่ม
เพิ่มองค์ประกอบปุ่มแบบโต้ตอบ
อินพุต
เพิ่มฟิลด์อินพุตฟอร์ม
+ (เพิ่มหน้าจอ)
เพิ่มหน้าจอใหม่ลงในโปรเจกต์ไวร์เฟรม
องค์ประกอบที่ล็อก
หน้าจอที่สร้างด้วย AI จะ ล็อกไว้ตามค่าเริ่มต้น — ไม่สามารถย้ายหรือปรับขนาดองค์ประกอบได้จนกว่าจะปลดล็อก กด Ctrl + D เพื่อปลดล็อกองค์ประกอบทั้งหมดในหน้าจอปัจจุบัน ให้คุณควบคุมอย่างเต็มที่ในการจัดเรียงและแก้ไข
โหมด Storyboard
โหมด Storyboard ให้คุณเห็นเฟรมทั้งหมดและจุดเชื่อมต่อในมุมมองภาพรวม สลับระหว่างแคนวาสหน้าจอเดียวและโหมด storyboard โดยใช้ปุ่มเดียวกันในแถบด้านข้างซ้าย ในโหมด storyboard แต่ละหน้าจอจะแสดงเป็นการ์ดพร้อมตัวอย่างเลย์เอาต์
ฟีเจอร์ Storyboard
ภาพรวมเฟรม
ดูหน้าจอทั้งหมดในที่เดียวพร้อมจำนวนองค์ประกอบและตัวอย่างภาพ
ตั้งเป็น Modal
ทำเครื่องหมายหน้าจอใดก็ได้เป็น modal overlay แทนที่จะเป็นหน้าเต็ม
คลิกเพื่อแก้ไข
คลิกการ์ดเฟรมใดก็ได้เพื่อข้ามไปยังมุมมองแคนวาสสำหรับการแก้ไขอย่างละเอียด
ตัวควบคุมซูม
ใช้ตัวควบคุมซูมทางซ้ายเพื่อซูมเข้า/ออกของ storyboard
การเชื่อมต่อ Flow
แสดงภาพว่าหน้าจอเชื่อมต่อกันอย่างไรผ่าน flow action ระหว่างเฟรม
คุณสมบัติองค์ประกอบ
ดับเบิลคลิกที่องค์ประกอบแคนวาสใดก็ได้เพื่อเข้าไปและเปิดแผงคุณสมบัติในแถบด้านขวา แผงมีสามแท็บ: คุณสมบัติ, โฟลว์ และ สี จากที่นี่คุณสามารถแก้ไขตำแหน่ง ขนาด สไตล์ และพฤติกรรมของแต่ละองค์ประกอบ
แท็บคุณสมบัติ
ตำแหน่ง (X, Y)
ตั้งค่าตำแหน่งพิกเซลที่แน่นอนขององค์ประกอบบนแคนวาส
ขนาด (กว้าง, สูง)
ตั้งค่าขนาดขององค์ประกอบเป็นพิกเซล
Z-Index (ลำดับชั้น)
ควบคุมว่าองค์ประกอบใดปรากฏอยู่บนสุดขององค์ประกอบอื่น
รัศมีมุม
ตั้งค่าความโค้งของมุมด้วยค่าตัวเลขหรือใช้ค่าที่ตั้งไว้ Sharp, Rounded หรือ Pill
เนื้อหาข้อความ
แก้ไขข้อความที่แสดงภายในองค์ประกอบ
แท็บสี
กำหนดเองสีพื้นหลัง ขอบ และข้อความสำหรับองค์ประกอบที่เลือก
Flows
Flows กำหนดการดำเนินการและการนำทางระหว่างหน้าจอ Flow คือการดำเนินการเช่นการนำทางไปยังหน้าอื่น การเปิด modal หรือการเปลี่ยนเส้นทางไปยังพื้นที่อื่น ไอคอนลิงก์ขนาดเล็กบนแคนวาสบ่งชี้ว่าองค์ประกอบใดมี flow แนบ เฟรมจะถูกเชื่อมต่อระหว่างกันอัตโนมัติระหว่างการสร้างด้วย AI และการเชื่อมต่อ flow จะถูกสร้างด้วย
การตั้งค่า Flows
เลือกองค์ประกอบ
คลิกองค์ประกอบที่คุณต้องการเพิ่ม flow
เปิดแท็บ Flow
ในแถบด้านข้างขวา สลับไปยังแท็บ Flow เพื่อดูการเชื่อมต่อที่มีอยู่หรือเพิ่มใหม่
เพิ่มการเชื่อมต่อ
คลิกเพิ่มการเชื่อมต่อแรก (หรือปุ่ม +) เพื่อสร้าง flow ใหม่ เลือกหน้าจอหรือเฟรมเป้าหมายที่จะเชื่อมต่อ
ดูบนแคนวาส
องค์ประกอบที่เชื่อมต่อแสดงไอคอนลิงก์ขนาดเล็กบนแคนวาสเพื่อบ่งชี้ว่ามี flow action
การเชื่อมต่อบล็อก
การเชื่อมต่อบล็อกช่วยให้คุณแนบบล็อกจากไลบรารีบล็อกไปยังองค์ประกอบ wireframe โดยตรง เมื่อคุณดับเบิลคลิกที่องค์ประกอบและเลื่อนลงในแผงคุณสมบัติ คุณจะพบส่วนการเชื่อมต่อบล็อก คลิก + เพิ่มบล็อก เพื่อเชื่อมโยงบล็อก (HTML คอมโพเนนต์ หรือเทมเพลต) กับองค์ประกอบ บล็อกที่เชื่อมต่อจะถูกอ้างอิงเมื่อสร้างโค้ดด้วย AI ทำให้ง่ายต่อการแนบโค้ด HTML หรือคอมโพเนนต์เฉพาะกับองค์ประกอบ wireframe
การแก้ไขด้วย AI
แถบพรอมต์ AI ที่ด้านล่างของแคนวาสช่วยให้คุณใช้ AI เพื่อแก้ไขหรือสร้างหน้าจอ เลือกโมเดล AI ของคุณจากเมนูดรอปดาวน์ทางซ้าย อธิบายการเปลี่ยนแปลงที่คุณต้องการ และ AI จะแก้ไข wireframe ให้คุณ คุณยังสามารถใช้การป้อนข้อมูลด้วยเสียงหรือปุ่ม แก้ไข CLI สำหรับการแก้ไขขั้นสูง
การใช้พรอมต์ที่ตระหนักบริบท
หน้าจอเดียว
เมื่อแก้ไขหน้าจอเดียว แถบพรอมต์จะแสดง "กำลังแก้ไข 'ชื่อหน้าจอ'" และการเปลี่ยนแปลง AI จะใช้กับหน้าจอนั้นเท่านั้น
Storyboard
เมื่ออยู่ในโหมด storyboard AI สามารถแก้ไขทุกเฟรมพร้อมกันหรือสร้างเฟรมใหม่โดยใช้เฟรมที่มีอยู่เป็นข้อมูลอ้างอิง
การป้อนข้อมูลเสียง
ใช้ไอคอนไมโครโฟนในแถบพรอมต์เพื่อบอกคำสั่งแทนการพิมพ์
แก้ไข CLI
คลิกแก้ไข CLI สำหรับโหมดแก้ไขขั้นสูงพร้อมการควบคุมการเปลี่ยนแปลงที่ขับเคลื่อนด้วย AI มากขึ้น
การส่งออกและการรวม
Wireframe สามารถ ส่งออก, นำเข้า หรือ ใช้โดยตรง เมื่อสร้างโปรเจกต์หรือภายใน Project Hub ทำให้ง่ายต่อการเปลี่ยนจากการออกแบบ wireframe ไปเป็นโปรเจกต์ที่ใช้งานได้โดยไม่ต้องสร้างการออกแบบใหม่ด้วยตนเอง