Dev Mode ใน Figma คืออะไร? สวรรค์ของเดฟและนักพัฒนา
โหมด Dev ในการออกแบบ Figma ช่วยให้นักพัฒนามีทุกสิ่งที่จำเป็นในการนำทางไฟล์การออกแบบและแปลงการออกแบบเป็นโค้ด ด้วยโหมด Dev นักออกแบบและนักพัฒนาจะสามารถทำงานร่วมกันในที่เดียวกันได้ และสามารมั่นใจว่ารายละเอียดต่างๆ จะไม่ตกหล่นในระหว่างการส่งต่อไปมา
เราใช้โหมด Dev เพื่อ:
เราใช้โหมด Dev เพื่ออะไร
- ●ดูและคัดลอกคุณสมบัติ ค่า และโค้ดจากส่วนประกอบการออกแบบ
- ●ดูสิ่งที่เปลี่ยนแปลงตั้งแต่ครั้งสุดท้ายที่คุณดูไฟล์ โดยการเปรียบเทียบเวอร์ชันของเฟรม
- ●ตรวจสอบและนำทางไฟล์การออกแบบด้วยการโต้ตอบง่ายๆ ที่แสดงข้อมูลเลเยอร์ที่สำคัญ
- ●ค้นหาการออกแบบที่พร้อมสำหรับการพัฒนาอย่างรวดเร็ว
- ●ปรับปรุงเวิร์กโฟลว์ของคุณด้วยการผสานรวมที่เน้นนักพัฒนา เช่น Jira, Storybook และ GitHub
เข้าสู่ Dev Mode บน Figma
เข้าสู่ Dev Mode บน Figma
Dev Mode เป็นอินเทอร์เฟซที่เน้นนักพัฒนาสำหรับการตรวจสอบและนำทางการออกแบบ คุณสามารถเข้าถึงโหมด Dev ได้ในไฟล์ออกแบบ Figma ใดๆ ในการสลับระหว่างโหมดการออกแบบและโหมดการพัฒนา:
-เปิดไฟล์ออกแบบ Figma
-คลิกปุ่มสลับโหมด Dev ที่ด้านบนของหน้าหรือใช้แป้นพิมพ์ลัด Shift+D
หน้าตา Dev Mode บน Figma
- ●ตรวจสอบการออกแบบ หน้าต่างเครื่องมือจะแสดงข้อมูลของการออกแบบและข้อมูลส่วนประกอบที่เกี่ยวข้องซึ่งจำเป็นต่อการแปลงเป็นโค้ด
- ●เปรียบเทียบการเปลี่ยนแปลงการออกแบบ หากมีการเปลี่ยนแปลงตั้งแต่ที่คุณดูไฟล์ครั้งล่าสุดการเปลี่ยนแปลงจะปรากฏถัดจากข้อมูลเลเยอร์ในแผงตรวจสอบ ซึ่งคุณสามารถเปรียบเทียบเวอร์ชันปัจจุบันกับเวอร์ชันก่อนหน้าของการออกแบบได้
- ●เพิ่มลิงก์ภายนอกสำหรับนักพัฒนา ทั้งนักออกแบบและนักพัฒนาสามารถเพิ่มลิงก์ไปยังภายนอกที่อาจช่วยในการปรับใช้ส่วนประกอบ ซึ่งอาจรวมถึงลิงก์ 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
Website: https://escendex.com/
Facebook: https://www.facebook.com/EscendeX
Medium: https://medium.com/@escendex
- 2
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2025 Blockdit
