โหมด Dev ในการออกแบบ Figma ช่วยให้นักพัฒนามีทุกสิ่งที่จำเป็นในการนำทางไฟล์การออกแบบและแปลงการออกแบบเป็นโค้ด ด้วยโหมด Dev นักออกแบบและนักพัฒนาจะสามารถทำงานร่วมกันในที่เดียวกันได้ และสามารถมั่นใจว่ารายละเอียดต่างๆ จะไม่ตกหล่นในระหว่างการส่งต่อไปมา
เราใช้โหมด Dev เพื่อ
- ดูและคัดลอกคุณสมบัติ ค่า และโค้ดจากส่วนประกอบการออกแบบ
- ดูสิ่งที่เปลี่ยนแปลงตั้งแต่ครั้งสุดท้ายที่คุณดูไฟล์ โดยการเปรียบเทียบเวอร์ชันของเฟรม
- ตรวจสอบและนำทางไฟล์การออกแบบด้วยการโต้ตอบง่ายๆ ที่แสดงข้อมูลเลเยอร์ที่สำคัญ
- ค้นหาการออกแบบที่พร้อมสำหรับการพัฒนาอย่างรวดเร็ว
- ปรับปรุงเวิร์กโฟลว์ของคุณด้วยการผสานรวมที่เน้นนักพัฒนา เช่น Jira, Storybook และ GitHub
เข้าสู่ Dev Mode บน Figma
Dev Mode เป็นอินเทอร์เฟซที่เน้นนักพัฒนาสำหรับการตรวจสอบและนำทางการออกแบบ คุณสามารถเข้าถึงโหมด Dev ได้ในไฟล์ออกแบบ Figma ใดๆ ในการสลับระหว่างโหมดการออกแบบและโหมดการพัฒนา
เปิดไฟล์ออกแบบ Figma
คลิกปุ่มสลับโหมด Dev ที่ด้านบนของหน้าหรือใช้แป้นพิมพ์ลัด Shift+D
ตรวจสอบการออกแบบ
หน้าต่างเครื่องมือจะแสดงข้อมูลของการออกแบบและข้อมูลส่วนประกอบที่เกี่ยวข้องซึ่งจำเป็นต่อการแปลงเป็นโค้ด
เปรียบเทียบการเปลี่ยนแปลงการออกแบบ
หากมีการเปลี่ยนแปลงตั้งแต่ที่คุณดูไฟล์ครั้งล่าสุดการเปลี่ยนแปลงจะปรากฏถัดจากข้อมูลเลเยอร์ในแผงตรวจสอบ ซึ่งคุณสามารถเปรียบเทียบเวอร์ชันปัจจุบันกับเวอร์ชันก่อนหน้าของการออกแบบได้
เพิ่มลิงก์ภายนอกสำหรับนักพัฒนา
ทั้งนักออกแบบและนักพัฒนาสามารถเพิ่มลิงก์ไปยังภายนอกที่อาจช่วยในการปรับใช้ส่วนประกอบ ซึ่งอาจรวมถึงลิงก์ GitHub, Jira และ Storybook รวมถึงลิงก์ VS Code ที่สามารถใช้กับส่วนขยาย Figma สำหรับ VS Code ทรัพยากร Dev ที่เพิ่มไปยังคอมโพเนนต์จะเผยแพร่ไปยังอินสแตนซ์ทั้งหมดของคอมโพเนนต์นั้น
สร้างได้เร็วขึ้นด้วยส่วนย่อยของโค้ดที่ปรับแต่งได้
ขณะอยู่ในโหมด Dev คุณสามารถเลือกภาษาและหน่วยเพื่อดูในพื้นที่ทำงานและโค้ดที่สร้างขึ้น รวมทั้งขยายฟังก์ชันการทำงานของส่วนย่อยของโค้ด
ดูชื่อและประเภทของเลเยอร์
ชื่อของเลเยอร์ที่เลือกจะแสดงที่ด้านบนของแผงตรวจสอบ พร้อมด้วยประเภทของเลเยอร์ (ส่วนประกอบ อินสแตนซ์ เฟรม ข้อความ ฯลฯ) คุณยังสามารถดูว่าเลเยอร์ได้รับการอัปเดตครั้งล่าสุดเมื่อใด
ลองใช้รูปแบบต่างๆ ของคอมโพเนนต์
เมื่อเลือกคอมโพเนนต์หรืออินสแตนซ์ คุณจะเห็นการแสดงตัวอย่างคอมโพเนนต์ ลิงก์ไปยังคอมโพเนนต์หลัก ตลอดจนลิงก์ไปยังเอกสารที่เกี่ยวข้องและแหล่งข้อมูลสำหรับนักพัฒนา
Playground คอมโพเนนต์ปรากฏในแผงตรวจสอบเมื่อเลือกอินสแตนซ์คอมโพเนนต์ ใช้ Playground เพื่อทดสอบคุณสมบัติต่างๆ ของส่วนประกอบโดยไม่ต้องเปลี่ยนการออกแบบจริง
ดูสไตล์ที่ใช้
ดูสไตล์และตัวแปรที่ใช้กับเลเยอร์ที่เลือก
ดาวน์โหลดเนื้อหา
Dev Mode สามารถตรวจจับไอคอนโดยอัตโนมัติและนำเสนอเป็นทรัพยากรที่ดาวน์โหลดได้สำหรับนักพัฒนา หากคุณต้องการตรวจสอบเลเยอร์เวกเตอร์แต่ละตัวที่อยู่ในไอคอน คุณสามารถปิดการตรวจหาไอคอนอัตโนมัติได้:
- คลิกเมนูหลักในแถบเครื่องมือ
- วางเมาส์เหนือมุมมองในดร็อปดาวน์
- ยกเลิกการเลือกตรวจหาไอคอนโดยอัตโนมัติ
- ดาวน์โหลดภาพ GIF และวิดีโอ MP4
ส่งออก
คุณสามารถใช้การตั้งค่าการส่งออกกับเลเยอร์เพื่อกำหนดรูปแบบและการตั้งค่าการส่งออกอื่นๆ Figma รองรับรูปแบบการส่งออกต่อไปนี้: PNG, JPG, SVG และ PDF เรียนรู้เพิ่มเติมเกี่ยวกับการส่งออกใน Figma →
ใช้ส่วนขยายโหมด Dev
ปลั๊กอินโหมด Dev ปรับปรุงเวิร์กโฟลว์การพัฒนาโดยการทำงานอัตโนมัติ เพิ่มฟังก์ชันใหม่ และรวมเครื่องมือที่ใช้สำหรับการจัดทำเอกสารและการสื่อสาร
- ติดตามงานการพัฒนาด้วยการซิงค์กับ Jira ใน Figma, FigJam และ Dev Mode
- เชื่อมต่อระบบการออกแบบ Figma ของคุณกับระบบการออกแบบในโค้ดด้วย Storybook
- เชื่อมโยงการออกแบบโค้ดเพื่อให้ซิงค์อยู่เสมอ โดยการนำ Github มาไว้ใน Figma
- แท็บปลั๊กอินในโหมด Dev จะแสดงปลั๊กอินที่คุณใช้ล่าสุด รวมถึงปลั๊กอินที่แนะนำจาก Figma Community
Figma สำหรับ VS Code
Figma สำหรับ VS Code ช่วยะตรวจสอบไฟล์การออกแบบ ทำงานร่วมกับนักออกแบบ ติดตามการเปลี่ยนแปลงการออกแบบ และเพิ่มความเร็วในการใช้งานการออกแบบ ทั้งหมดนี้โดยไม่ต้องออกจากโปรแกรม ปรับปรุงประสิทธิภาพการทำงานของนักพัฒนา โดยลดความยุ่งยากในการเปลี่ยนการออกแบบให้เป็นโค้ด
- ดูและตอบกลับความคิดเห็นและกิจกรรมแบบเรียลไทม์
- รับคำแนะนำโค้ดตามการออกแบบ
- เชื่อมโยงไฟล์โค้ดเพื่อออกแบบส่วนประกอบ
สอบถามเพิ่มเติม ติดต่อได้ที่
Email: contact@escendex.com
Facebook: https://www.facebook.com/EscendeX
Medium: https://medium.com/@escendex
Blockdit: https://www.blockdit.com/escendex
