Website to Figma: yalnızca ana sayfayı değil, tüm siteyi getirin

Bir web sitesinin çok sayıda sayfasını Figma'ya almanın üç yolu vardır ve bunlar birlikte iyi çalışır.

Çoklu bağlantılar

Multiple sekmesine 10'a kadar URL yapıştırın. Eklenti bunları sırayla işler ve her sayfayı kendi satırına yerleştirir; böylece bir sayfanın Desktop, Tablet ve Mobile yakalaması bir arada durur ve sayfalar alt alta dizilir.

Import linked pages

Bir içe aktarmadan sonra eklenti, o sayfadan bağlantı verilen aynı siteye ait diğer sayfaları listeleyebilir. İstediklerinizi seçin; Multiple içe aktarma olarak çalışırlar. Ana sayfadan başlayarak bu, genellikle birkaç turda ana navigasyonu kapsar.

Site klasörü veya .zip

Statik build'e sahipseniz, klasörü Local file sekmesine sürükleyin veya 30 MB'a kadar bir .zip yükleyin, ardından hangi HTML sayfalarını getireceğinizi seçin. Dosyalar izole bir tarayıcı içinde bellekten açılır ve içe aktarma biter bitmez silinir.

Her sayfa, ekran sayısı ne olursa olsun bir içe aktarma sayılır. Free'de ayda 10 içe aktarma hakkınız var; Pro ve Team adil kullanım sınırı dahilinde sınırsızdır. Ayrıntılar için fiyatlandırma sayfasına bakın.

Statik bir frame seti işe yarar, ancak müşteriler ve paydaşlar bir siteyi içinde tıklayarak dolaşabildiklerinde daha hızlı anlar. HTML to Frames zaten sahip olduğunuz navigasyonu korur:

• İçe aktarılan sayfalar arasındaki bağlantılar Navigate etkileşimlerine dönüşür; böylece ana sayfa frame'inde Pricing'e tıklamak fiyatlandırma frame'ine gider.
• Diğer bağlantılar Open link eylemini korur ve tarayıcıda açılır.
• Fixed ve sticky header'lar Present modunda kaydırırken yerinde kalır.
• Karuseller ve sekme şeritleri gibi yatay kaydırma alanları yana doğru kayar.

Pro'da hover görünümü olan öğeler, Default ve Hover varyantlı ve hover etkileşimli bileşen setlerine dönüşür; böylece butonlar ve menü öğeleri üzerlerine geldiğinizde tepki verir.

Bu, içe aktarılan siteyi olduğu gibi sunabileceğiniz bir başlangıç noktası yapar. Mevcut deneyimi gezin, sorunları yorumlarla işaretleyin, ardından frame'leri çoğaltın ve yeniden tasarıma orijinalin yanında başlayın. Her frame kaynak URL'sini sakladığı için herhangi bir sayfayı daha sonra yeniden içe aktarıp canlı siteyi teklifle karşılaştırabilirsiniz. Sayfaların nasıl yapılandırıldığı hakkında daha fazlası HTML to frame sayfasında.

Prototip bağlantıları yalnızca içe aktarmanın parçası olan sayfalar arasında oluşturulur; bu yüzden Import linked pages ile sayfa eklemek tıklanabilir akışı da genişletir.

Bir tasarım ajansı için bir projenin ilk haftası, yeniden tasarlanacak bir şey olsun diye çoğu zaman müşterinin mevcut sitesini yeniden oluşturmaya gider. Siteyi içe aktarmak bu işin büyük kısmını ortadan kaldırır ve ekibe zaten düzenli bir dosya bırakır.

Tipik bir akış şöyle görünür:

1. Sunumdan önce: müşterinin temel şablonlarını içe aktarın ve gerçekte kullanılan renk ve tipografi sistemini görmek için Styles & variables'ı açın.
2. Keşif sırasında: tıklanabilir içe aktarmayı müşteriye sunun ve sorunlu noktaları doğrudan frame'ler üzerinde not edin.
3. Yeniden tasarım sırasında: frame'leri çoğaltın ve yerinde değiştirin; tekrarlanan yapılardan çıkarılan bileşenler genel değişiklikleri hızlandırır.
4. Teslimde: yayına çıkanı doğrulamak için değiştirilen sayfaları yeniden içe aktarın.

Team planı, ortak bir lisans anahtarında beş kullanıcı hakkını ayda $22'lık lansman fiyatıyla ve içe aktarma başına dörde kadar ekranla sunar. Bu, birkaç tasarımcının müşteri sitelerini paralel olarak içe aktardığı küçük bir stüdyoya uygundur.

Müşteri işleri yürüten ajanslar veriler hakkında da soru sorma eğilimindedir. Sayfalar izole bir tarayıcıda işlenir, sonuçlar bir kez teslim edilir ve asla diske yazılmaz. Tam tablo güvenlik sayfasında.