DesignFlow: Chrome'da Yerleşik Tarayıcı Tasarım Araçları
DesignFlow, Régis Cardoso (DSR) tarafından geliştirilen bir Chrome uzantısıdır, tarayıcı tabanlı tasarım görevlerini UI/UX tasarımcıları ve ön uç geliştiricileri için yan yana yerleştirilmiş bir çalışma alanında birleştirir. İnceleme, canlı düzenleme, erişilebilirlik denetimi ve varlık çıkarımını merkezi hale getirerek arayüz incelemeleri sırasında daha az dış araca ihtiyaç duyulmasını sağlar. Uzantı, gezinirken mevcut kalmak için Chrome Yan Panelini kullanır, proje verilerini korumak için yerel işleme vurgusu yapar ve uygulamalar arasında geçiş yapmadan tek pencereli bir tarayıcı iş akışını tercih eden profesyonellere uygundur.
DesignFlow, yan docklu bir arayüz ile tarayıcı içindeki iş akışlarını hedefliyor
Uygulama, araçların görünür kalmasını sağlarken ana sayfanın engellenmeden kalmasını sağlamak için Chrome'un Yan Panel API'si içinde çalışır. Manifest V3 üzerine inşa edilmiştir ve bu panel API'sini destekleyen bir Chrome sürümü gerektirir. Uzantı, Windows, macOS, Linux ve ChromeOS için aynı panel UI'sını paketler, bu da masaüstü platformları arasında tutarlı bir inceleme ortamı sağlar ve arayüz incelemeleri sırasında ayrı uygulama pencereleri açmaktan kaçınır.
DesignFlow, dışa açılmayı sınırlamak için tasarım verilerini yerel olarak işler
Geliştirici, renk örnekleme, DOM inceleme ve varlık paketleme işlemlerini tarayıcı içinde gerçekleştiren bir gizlilik öncelikli mimari uygulamıştır ve araç, gezinme geçmişini veya tasarım verilerini dış sunuculara göndermez. Bu yerel öncelikli yaklaşım, kullanıcı makinesinde örnekleme ve dışa aktarma görevlerini gerçekleştirmek için yerel tarayıcı API'lerini kullanır, bu da dışa aktarılan ZIP arşivlerinin ve çıkarılan varlıkların kullanıcı kontrolünde kalmasını sağlar, üçüncü taraf hizmetlere iletilmez.
Tarayıcı içindeki düzenleme, test etme ve çıkarma, somut tarayıcı API'leri ve toplu araçlar kullanır
Uzantı, canlı DOM'da kenar boşluklarını, dolgu, z-index ve boyutları değiştiren görsel bir CSS editörü sunar, ayrıca aileler ve boyutlar için üzerine gelerek inceleme yapan bir yazı tipi tarayıcısı vardır. Renk Stüdyosu, EyeDropper API'sini entegre eder ve paletleri çıkarmak için yerel resim dosyalarının sürükleyip bırakılmasını destekler. Varlık Dışa Aktarıcı, bir sayfanın toplu taramasını gerçekleştirir ve SVG'leri ve raster görüntüleri bir ZIP dosyasına paketlerken, Responsive Breakpoint Tester, düzen kontrolleri için senkronize kaydırma ile yan yana önizlemeler gösterir.
DesignFlow, tek tarayıcıda, gizlilik odaklı bir iş akışını tercih eden tasarımcılar için uygundur
Uygulama, Chrome içinde çalışmayı ve verileri yerel tutmayı tercih eden UI/UX tasarımcıları ve ön uç geliştiricileri için pratik bir seçimdir; çünkü Side Panel entegrasyonu ve yerel işleme modeli sunmaktadır. Açık bir takas, Side Panel API'sini destekleyen bir Chrome derlemesine bağımlılıktır; bu, eski veya kilitli tarayıcı sürümlerini çalıştıran ortamlarda kullanımı sınırlayabilir.
