DesignFlow: เครื่องมือออกแบบในเบราว์เซอร์ที่ติดตั้งใน Chrome
DesignFlow ซึ่งพัฒนาโดย Régis Cardoso (DSR) เป็นส่วนขยายของ Chrome ที่รวมงานออกแบบที่ใช้เบราว์เซอร์เข้าด้วยกันในพื้นที่ทำงานที่อยู่ด้านข้างสำหรับนักออกแบบ UI/UX และนักพัฒนาส่วนหน้า มันรวมการตรวจสอบ การแก้ไขแบบสด การตรวจสอบการเข้าถึง และการดึงข้อมูลทรัพย์สินไว้ด้วยกันเพื่อลดเครื่องมือภายนอกที่จำเป็นในระหว่างการตรวจสอบอินเทอร์เฟซ ส่วนขยายนี้ใช้ Chrome Side Panel เพื่อให้สามารถใช้งานได้ในขณะที่คุณนำทาง เน้นการประมวลผลในท้องถิ่นเพื่อปกป้องข้อมูลโครงการ และเหมาะสำหรับมืออาชีพที่ชอบการทำงานในเบราว์เซอร์แบบหน้าต่างเดียวโดยไม่ต้องสลับแอปพลิเคชัน
DesignFlow มุ่งเป้าไปที่การทำงานในเบราว์เซอร์ด้วยอินเทอร์เฟซที่ติดอยู่ด้านข้าง
แอปทำงานภายใน API Side Panel ของ Chrome ดังนั้นเครื่องมือจึงยังคงมองเห็นได้ในขณะที่หน้าเว็บหลักยังคงไม่ถูกขัดจังหวะ มันถูกสร้างขึ้นบน Manifest V3 และต้องการการสร้าง Chrome ที่รองรับ API แผงนั้น ส่วนขยายบรรจุ UI แผงเดียวกันสำหรับ Windows, macOS, Linux และ ChromeOS ซึ่งรักษาสภาพแวดล้อมการตรวจสอบที่สอดคล้องกันข้ามแพลตฟอร์มเดสก์ท็อปและหลีกเลี่ยงการเปิดหน้าต่างแอปพลิเคชันแยกต่างหากในระหว่างการตรวจสอบอินเทอร์เฟซ.
DesignFlow ประมวลผลข้อมูลการออกแบบในเครื่องเพื่อลดการเปิดเผยภายนอก
นักพัฒนาได้ดำเนินการสถาปัตยกรรมที่มุ่งเน้นความเป็นส่วนตัวซึ่งประมวลผลการสุ่มสี, การตรวจสอบ DOM, และการบรรจุสินทรัพย์ภายในเบราว์เซอร์ และเครื่องมือไม่ส่งประวัติการนำทางหรือข้อมูลการออกแบบไปยังเซิร์ฟเวอร์ภายนอก วิธีการที่มุ่งเน้นในเครื่องนั้นใช้ API เบราว์เซอร์พื้นเมืองเพื่อทำการสุ่มและส่งออกงานบนเครื่องของผู้ใช้ ซึ่งทำให้ไฟล์ ZIP ที่ส่งออกและสินทรัพย์ที่ถูกดึงออกอยู่ภายใต้การควบคุมของผู้ใช้แทนที่จะถูกส่งไปยังบริการของบุคคลที่สาม.
การแก้ไข, การทดสอบ, และการดึงข้อมูลในเบราว์เซอร์ใช้ API เบราว์เซอร์ที่เป็นรูปธรรมและเครื่องมือแบตช์
ส่วนขยายเปิดเผยตัวแก้ไข CSS แบบภาพที่ปรับเปลี่ยนขอบ, การเติม, z-index, และขนาดบน DOM สด รวมถึงเครื่องสแกนฟอนต์แบบเลื่อนเพื่อการตรวจสอบสำหรับครอบครัวและขนาดต่างๆ Color Studio รวม EyeDropper API และรองรับการลากและวางไฟล์ภาพในเครื่องเพื่อดึงพาเลต ส่วนขยายสินทรัพย์ทำการสแกนแบตช์ของหน้าและบรรจุ SVG และภาพเรสเตอร์ลงใน ZIP ในขณะที่ Responsive Breakpoint Tester แสดงตัวอย่างข้างเคียงพร้อมการเลื่อนที่ซิงโครไนซ์สำหรับการตรวจสอบเลย์เอาต์.
DesignFlow เหมาะสำหรับนักออกแบบที่ชอบการทำงานในเบราว์เซอร์เดียวที่มุ่งเน้นความเป็นส่วนตัว
แอปนี้เป็นตัวเลือกที่เหมาะสมสำหรับนักออกแบบ UI/UX และนักพัฒนาฟรอนต์เอนด์ที่ชอบทำงานใน Chrome และเก็บข้อมูลในเครื่อง เนื่องจากการรวม Side Panel และโมเดลการประมวลผลในเครื่อง ข้อแลกเปลี่ยนที่ชัดเจนคือการพึ่งพา Chrome build ที่รองรับ Side Panel API ซึ่งอาจจำกัดการใช้งานในสภาพแวดล้อมที่ใช้เบราว์เซอร์เวอร์ชันเก่าหรือถูกล็อก
