Website to Figma: ajanslar için yeniden tasarım teklifi rehberi

Her yeniden tasarım aynı gösterişsiz işle başlar: müşterinin mevcut sitesini tasarım aracınıza almak. Ekran görüntüleri hızlıdır ama doğar doğmaz işe yaramaz. Sayfaları elle yeniden kurmak doğrudur ama asıl yeniden tasarıma ayırmayı tercih edeceğiniz günleri yer.

Bu rehber, HTML to Frames ile bir web sitesini Figma'ya gerçek, düzenlenebilir katmanlar olarak nasıl taşıyacağınızı ve bu içe aktarmayı müşterinizin bir bakışta anlayabileceği bir yeniden tasarım teklifine nasıl dönüştüreceğinizi gösteriyor. Ajanslar ve serbest tasarımcılar için yazıldı, ancak iş akışı kendi ürün sitesini denetleyen şirket içi ekipler için de aynı derecede işe yarar.

Mevcut web sitesini neden Figma'ya almalı?

Bir yeniden tasarım teklifi bir argümandır. Müşteriye şunu söylüyorsunuz: “Elinizdeki bu, olması gereken bu ve nedeni de bu.” “Elinizdeki” kısmı doğru ve düzenlenebilir olduğunda bu argüman çok daha güçlüdür.

• Gerçeğini denetlersiniz. Boşluklar, tipografi ölçeği, renk kullanımı ve bileşen sapmaları bir ekran görüntüsünden tahmin edilmez, katmanlar panelinde görünür.
• Mevcut yapının üzerine yeniden tasarlarsınız. Bir hero'yu değiştirin, bir kart stilini değiştirin, navigasyonu yeniden düzenleyin; sayfanın geri kalanı bağlam için olduğu gibi kalır.
• Önceyi ve sonrayı yan yana gösterirsiniz. Aynı frame boyutu, aynı içerik, farklı tasarım. Müşteriler hemen anlar.
• Yeniden inşa süresinden tasarruf edersiniz. Mevcut siteyi yeniden çizmeye harcayacağınız saatler seçenekleri keşfetmeye gider.

HTML to Frames bir sayfayı düz bir resim değil, gerçek Figma frame'lerine, metinlerine, vektörlerine ve görsellerine dönüştürür. Bu ayrımın arka planını merak ediyorsanız HTML to canvas ve düzenlenebilir katmanlar yazısını okuyun.

Website to Figma ve URL to Figma: fark nedir?

İnsanlar ikisini de arar ve pratikte aynı iş akışını kastederler. URL to Figma genellikle mekaniği tanımlar: bir bağlantı yapıştırın, bir tasarım alın. Website to Figma ise kapsamı tanımlar: bir sitenin birkaç sayfası, çoğu zaman farklı ekran boyutlarında. HTML to Frames, tek bir URL to Figma içe aktarmasından bağlantılı sayfalarla tam bir website to Figma yakalamasına kadar ikisini de kapsar.

Adım 1: Hangi sayfaların yakalanacağını planlayın

Figma'yı açmadan önce yeniden tasarım hikâyesini taşıyan sayfaları listeleyin. Çoğu pazarlama sitesi için bunlar şunlardır:

1. Ana sayfa
2. Bir temel açılış veya ürün sayfası
3. Fiyatlandırma
4. Hakkımızda veya ekip
5. Blog dizini ve bir yazı
6. İletişim veya önemli bir form sayfası

Tüm site haritasına nadiren ihtiyacınız olur. Şablon başına bir sayfaya ihtiyacınız vardır, çünkü yeniden tasarlayacağınız şey şablonlardır. Altı ila on sayfa genellikle yeterlidir ve bu da tek bir Multiple içe aktarmaya tam olarak sığar.

Adım 2: Birkaç sayfayı tek seferde içe aktarın

Eklentiyi açın ve Multiple kaynağını kullanın. 10 bağlantıya kadar yapıştırın; sırayla işlenirler ve her sayfa tuvalde bir satır olur. Multiple içe aktarma Free dahil her planda kullanılabilir.

Ajans işi için birkaç ayrıntı önemlidir:

• Bir site = bir genişlik. Desktop, Site width kullanır: eklenti içe aktarma anında sayfanın gerçek tasarım genişliğini ölçer. Tam genişlikli tasarımlar içerik kutusu ortalanmış 1920, kutulu siteler kendi kutu genişliklerinde (örneğin 1200, 1280 veya 1440), akışkan siteler 1440 genişliğinde gelir. Çok sayfalı bir içe aktarmada sitenin her sayfası bu genişliği paylaşır; böylece satırlarınız hizalanır.
• Frame adları okunabilirdir. Frame'ler protokol veya www olmadan domain/path — Desktop (1920) gibi adlandırılır; böylece katmanlar panelinde sayfaları birbirinden ayırt edebilirsiniz.
• Çerez bannerları ve açılır pencereler istek üzerine gizlenebilir, temiz bir kare için animasyonlar dondurulur. Site, sıradan bir ziyaretçinin gördüğü gibi yakalanır.

URL avlamak yerine Import linked pages kullanın

Henüz bir sayfa listeniz yoksa önce ana sayfayı içe aktarın. İçe aktarmadan sonra Import linked pages'i kullanın: aynı sitenin diğer sayfalarını bir listeden seçin; Multiple içe aktarma olarak içe aktarılırlar. Bu, tarayıcıdan URL kopyalamadan ana navigasyon hedeflerini almanın en hızlı yoludur.

Adım 3: Responsive set'i yakalayın

Müşteriler artık başka bir şey sormadan önce “telefonumda nasıl görünüyor?” diye soruyor. Bunu gerçek frame'lerle yanıtlayın.

Desktop + Tablet + Mobile'ı tek tıkla yakalamak için Responsive set'i açın. Tablet 768, Mobile 390'dır; ayrıca 1280'de Laptop da vardır. Pro ve Team'de içe aktarma başına 4 ekrana kadar yakalayabilir ve müşterinin analitiği alışılmadık bir kırılma noktası gösteriyorsa Custom width ayarlayabilirsiniz. Bir sayfanın ekranları paralel olarak yakalanır.

Faturalandırma basit kalır: 1 içe aktarma = tüm ekranlarıyla 1 sayfa. Ana sayfanın Desktop, Tablet ve Mobile ekranları tek bir içe aktarma sayılır.

Adım 4: Site destekliyorsa Light + Dark ekleyin

Müşterinin sitesi prefers-color-scheme'e yanıt veriyorsa, Light + Dark seçeneği (Pro) sayfayı her iki modda yakalar. Light ve Dark modlarına sahip tek bir değişken koleksiyonu ve her ekranın koyu bir kopyasını alırsınız. Dark mod yeniden tasarım brifinin bir parçasıysa bu güçlü bir başlangıç noktasıdır ve hangi bileşenlerin koyu arka planlar için hiç tasarlanmadığını size hemen gösterir.

Figma Free dosyalarının koleksiyon başına bir moda izin verdiğini unutmayın; Free bir dosyada dark mod bir notla atlanır.

Adım 5: İçe aktarmayı bir denetime dönüştürün

Artık içe aktarma bir çalışma dosyasına dönüşür. Herhangi bir şeyi yeniden tasarlamadan önce bir saatinizi denetime ayırın.

Zaten var olan tasarım sistemini okuyun

Styles & variables (Pro) ile eklenti, iki veya daha fazla kez kullanılan renklerden ve sitenin CSS custom property'lerinden renk değişkenleri oluşturur; böylece --brand-primary, brand/primary olur. Metin stilleri ve gölge stilleri de alırsınız. Aynı siteyi iki kez içe aktarın, yeni hiçbir şey oluşturulmaz; çünkü değerler eşleştiğinde mevcut değişkenler ve stiller yeniden kullanılır.

Bu koleksiyon dürüst bir envanterdir. Neredeyse aynı otuz gri ya da on bir gövde metni boyutu, teklifinizde kendi hikâyesini anlatır.

Tekrarlanan bileşenleri fark edin

Components & hover states (Pro) ile kartlar, butonlar ve menü öğeleri gibi tekrarlanan yapılar bileşenlere ve instance'lara dönüşür; hover görünümü olan öğeler ise Default ve Hover varyantlı bileşen setlerine dönüşür. Ana bileşenler bir “Components · site” frame'ine yerleşir. Bir denetim için bu frame, mevcut sitenin gerçekte neler kullandığının hazır bir envanteridir.

Yerleşim yapısını kontrol edin

Frame'lerin çoğu Auto Layout ile gelir; böylece yeniden boyutlandırabilir ve yeniden düzenleyebilirsiniz. Eklenti önce sayfayı piksel piksel birebir kurar, ardından yığınları, boşlukları, iç boşlukları ve hizalamayı çıkarır ve sonucu korumadan önce her alt öğenin konumunu doğrular. Bir frame temiz bir şekilde ifade edilemiyorsa, mantıklı kısıtlamalarla absolute konumlarını korur ve sonuç ekranı nedenini söyler. Mekanizmanın tamamı Auto Layout'un açıklaması yazısında anlatılıyor.

Bir referans katmanı tutun

İçe aktarmayı canlı sayfayla karşılaştırmak için açıp kapatabileceğiniz gizli, kilitli bir katman eklemek üzere Reference screenshot'ı açın. Bir müşteri “bugün elimizdeki gerçekten bu mu?” diye sorduğunda işe yarar.

Adım 6: Yeniden tasarım teklifini oluşturun

Doğru ve düzenlenebilir bir “önce” ile teklif neredeyse kendiliğinden bir araya gelir.

Çoğaltın, sonra yeniden tasarlayın

İçe aktarılan her satırı çoğaltın. Orijinali Before olarak tutun, kopyayı After olarak etiketleyin ve yeniden tasarıma kopya üzerinde başlayın. İçerik gerçek metin ve gerçek görseller olduğu için lorem ipsum ile değil, müşterinin kendi metinleri ve fotoğraflarıyla yeniden tasarlarsınız.

Önce/sonra panolarını sunun

Before ve After frame'lerini aynı genişlikte yan yana yerleştirin. Her şablon için değişikliği açıklayan iki ya da üç not ekleyin: daha net hiyerarşi, daha kısa formlar, daha iyi kontrast, birleştirilmiş bileşenler.

Akışın prototipini çıkarın

İçe aktarılan sayfalar arasındaki bağlantılar Navigate etkileşimlerine dönüşür ve fixed veya sticky header'lar Present modunda çalışmaya devam eder. Bu, aynı prototipte önce mevcut site, ardından teklif içinde tıklayarak gezinebileceğiniz anlamına gelir; bu da bir görüşmede ikna edici bir sunum sağlar.

Önce ve sonra: iş akışınızda neler değişir

Ajanslar için Team planı ve lisanslama

Ajanslarda bir yeniden tasarımla genellikle birden fazla tasarımcı ilgilenir. Planların buna nasıl karşılık geldiği:

• Free: $0, ayda 10 içe aktarma, içe aktarma başına 1 ekran, 10 bağlantılı Multiple içe aktarma. İş akışını küçük bir sitede denemek için iyidir.
• Pro: lansmanda ayda $7 (normalde $9), adil kullanım dahilinde sınırsız içe aktarma, içe aktarma başına 4 ekrana kadar; ayrıca stiller ve değişkenler, Snap, bileşenler ve hover, Light + Dark, Custom width, Detailed layers, Reference screenshot ve Extra wait. Figma'nın kendi ödeme ekranında satın alınır.
• Team: lansmanda ayda $22 (normalde $29), Pro ile aynı özellikler, ortak bir lisans anahtarı üzerinden 5 kullanıcı.

Ayda birkaç yeniden tasarım yürüten bir ajans için Team, her tasarımcının ayrı ayrı satın almasına gerek kalmadan herkesi aynı özellik setinde tutar. Ayrıntılar için fiyatlandırma sayfasına bakın.

Örnek takvim: iki haftalık bir yeniden tasarım sprinti

İçe aktarma eklenti tarafından halledildiğinde tipik bir sprint şöyle görünebilir. Kendi sürecinize göre uyarlayın.

Eskiden bir iki gün yeniden kurma gerektiren içe aktarma adımı ilk sabaha iner.

Müşteri sitelerinde zaman kazandıran ipuçları

• Slider'lar veya tembel yüklenen bölümler gibi içeriği geç yükleyen siteler için Extra wait (Pro) kullanın.
• Çok dilli siteler için sayfa dilini seçin; eklenti 15 dili destekler.
• Önce fontları çözün. Missing fonts ekranı oluşturmadan önce alternatifler önerir ve seçimlerinizi site bazında hatırlar.
• Müşteri proje ortasında bir değişikliği yayına aldığında tek tıkla yeniden içe aktarın. Kaynak URL frame'de saklanır.
• Gömülü içeriğe dikkat edin. Haritalar, poster görseli olmayan videolar ve WebGL canvas'ları katman olamadıkları için o kutunun ekran görüntüsü olarak gelir.
• Giriş gerektiren sayfalar tarayıcı yolunu gerektirir. Giriş arkasındaki müşteri portalları veya paneller için Chrome uzantısını kullanın; localhost ve giriş gerektiren sayfalar rehberimize bakın.

Müşteri verileri ve gizlilik

Ajanslara müşteri materyallerinin nasıl işlendiği sıkça sorulur. Sayfalar izole, sandbox içinde çalışan bir tarayıcıda işlenir, bir kez teslim edilir, ardından bellekten silinir ve asla diske yazılmaz. Eklenti Figma dosyanızın içeriğini okumaz; yalnızca katman yazar. Güvenlik sayfası, bir müşteriye iletebileceğiniz ayrıntıları içerir.

Toparlarsak

Bir müşterinin web sitesini Figma'ya düzenlenebilir katmanlar olarak taşımak, bir yeniden tasarımın ilk ve en sıkıcı adımını kısa bir içe aktarmaya dönüştürür. Doğru bir “önce”, sitenin gerçek CSS'inden oluşturulmuş bir denetim ve teklifin orijinalin yanında doğal olarak büyüdüğü bir dosya elde edersiniz. Bir şablonla başlayın, sonucu kontrol edin, ardından sitenin geri kalanını Multiple ve Import linked pages ile getirin.

Denemeye hazır mısınız? Tüm özelliklere bakın, dokümantasyonu okuyun ya da eklentiyi edinip ilk içe aktarmanızı yapın.