Anlamlı frame'ler
HTML to frame: her sayfa ve ekran bir Figma frame'ine dönüşür
Sayfa ve ekrana göre adlandırılmış üst düzey frame'ler, DOM'u izleyen iç içe frame'ler ve uygulanmadan önce doğrulanan Auto Layout.
- Frame genişliği gerçek tasarımdan ölçülür
- İç içe frame'ler sayfa yapısını yansıtır
- Tek içe aktarmada Desktop, Tablet ve Mobile frame'leri (Pro)
Yakında Figma Community'de
HTML to frame, tasarımcıların bir içe aktarmadan gerçekte beklediği çıktıyı tanımlar: tek bir resim değil, her sayfa ve ekran için bir Figma frame'i (çerçeve) ve katmanlar panelini açtığınızda anlam ifade eden iç içe bir frame hiyerarşisi. EUREKA!'nın Figma eklentisi HTML to Frames her içe aktarmayı bu şekilde yapılandırır.
Yakalanan her ekran, example.com/pricing — Desktop (1920) gibi öngörülebilir bir ada sahip tek bir üst düzey frame olur. Protokol ve www atılır, adlar 60 karakteri geçmez; böylece çok sayfalı bir içe aktarmaya kolayca göz gezdirilir. İçeride, sayfadaki kapsayıcılar frame olur ve bu frame'ler DOM'u izler. Bir header frame'i bir navigasyon frame'ini, o da bağlantı frame'lerini içerir; tıpkı geldikleri işaretleme (markup) gibi.
Frame genişliği bir tahmin değildir. Eklenti, sayfanın gerçek tasarım genişliğini içe aktarma anında ölçer. Tam genişlikli (full-bleed) tasarımlar içerik kutusu ortalanmış 1920'lik bir frame alır, gerçekten kutulu siteler 1200, 1280 veya 1440 gibi kendi kutu genişliğini, akışkan (fluid) siteler ise 1440 alır. Çok sayfalı bir içe aktarmada bir sitenin her sayfası için aynı genişlik kullanılır; böylece frame'ler hizalanır.
Yerleşim izin verdiği yerlerde frame'ler Auto Layout frame'lerine dönüşür. Eklenti yönü, boşlukları (gap), iç boşlukları (padding), hizalamayı ve satır kaydırmayı tarayıcının ölçtüğü geometriden çıkarır, planı uygular ve her alt öğeyi 2 px içinde kontrol eder. Bunun tutmadığı frame'ler kısıtlamalarla absolute konumlarını korur; böylece hiçbir şey beklenmedik şekilde yer değiştirmez.
Bu motorun ayrıntıları için Auto Layout'un açıklaması yazısını okuyun. Dönüşümün genel hali için HTML to Figma, aynı anda çok sayfa için website to Figma sayfasına bakın.
Bir sayfa nasıl frame'lere dönüşür
- 01
Site genişliğini ölçün
Eklenti tasarımın tam genişlikli, kutulu veya akışkan olduğunu tespit eder ve Desktop frame genişliğini buna göre seçer.
- 02
Piksel piksel birebir frame'ler kurun
Her kapsayıcı, DOM hiyerarşisini yansıtarak ölçülen konumunda bir frame olur.
- 03
Auto Layout'u içten dışa çıkarın
En içteki frame'lerden başlayarak yığınlar, satır kaydırmalar, boşluklar, iç boşluklar ve hizalama çıkarılır ve uygulanır.
- 04
Doğrulayın veya geri çekilin
Her alt öğe 2 px içinde kontrol edilir; tutmayan frame'ler daha basit bir plan dener ya da kısıtlamalarla absolute konumlarını korur.
Temizlik süresinden tasarruf ettiren frame düzeyindeki ayrıntılar
Ölçülen site genişliği
Desktop frame'leri tasarımın gerçek genişliğini kullanır: tam genişlikli tasarımda 1920, kutulu sitelerde kutu genişliği, akışkan sitelerde 1440.
DOM biçimli hiyerarşi
İç içe frame'ler sayfa yapısını izler; böylece bölümler, kartlar ve butonlar katmanlar panelinde kolayca bulunur.
Auto Layout frame'leri
Yatay ve dikey yığınlar, kaydırmalı satırlar, boşluklar ve iç boşluklar; her alt öğe için tek tek doğrulanır.
Responsive niyet
Ortalanmış içerik ortada kalır, eşit kartlar Fill olur ve bir logo ile menü arasındaki boşluk bir Fill öğesine dönüşür.
Responsive set
Bir sayfanın Desktop, Tablet 768 ve Mobile 390 frame'leri paralel yakalanır ve tek içe aktarma sayılır (Pro).
Bir frame'i yeniden içe aktarın
Her frame kaynak URL'sini ve genişliğini saklar; böylece tek tıkla yenileyebilirsiniz.
Frame adlandırma ve site genişliği
Üç ekranda on sayfa içe aktardığınızda frame adları önem kazanır. HTML to Frames tek ve tutarlı bir kalıp kullanır:
domain/path?query — Screen (width)
Örneğin shop.example.com/products?sort=new — Mobile (390). Protokol ve www yoktur; adlar tuvalde okunabilir kalsın diye 60 karakterle sınırlanır.
Desktop genişliği nasıl seçilir
Desktop ekranına Site width denir, çünkü tahmin edilmez, ölçülür:
| Site türü | Desktop frame genişliği |
|---|---|
| Tam genişlikli (full-bleed) tasarım | 1920, içerik kutusu ortalanmış |
| Gerçekten kutulu site | Kutu genişliği, örneğin 1200, 1280 veya 1440 |
| Akışkan (fluid) yerleşim | 1440 |
Bir site, çok sayfalı bir içe aktarmada tek bir genişlik alır; böylece tüm Desktop frame'leri bir satırda hizalanır. Diğer ekranlar sabit genişlikler kullanır: Laptop 1280, Tablet 768 ve Mobile 390. Pro'da belirli bir kırılma noktasına ihtiyacınız olduğunda Custom width de girebilirsiniz.
Her frame ayrıca kaynak URL'sini ve genişliğini saklar; daha sonra tek tıkla yeniden içe aktarmayı mümkün kılan da budur.
Tutarlı adlar Figma dışında da işe yarar. Bir frame'in bağlantısını paylaştığınızda veya dışa aktardığınızda, ad bir geliştiriciye tam olarak hangi sayfaya ve kırılma noktasına baktığını söyler.
İç içe frame'ler ve Auto Layout, doğrulanmış
Her üst düzey frame'in içinde hiyerarşi DOM'u yansıtır. Bu, katmanlar panelini işaretlemeyi bilen herkes için tanıdık kılar ve Auto Layout'a üzerinde çalışabileceği gerçek kapsayıcılar sağlar.
Motor sabit bir sırayla çalışır:
- Sayfayı absolute konumlarla piksel piksel birebir kurar.
- Frame'leri içten dışa dolaşır ve ölçülen geometriden dikey veya yatay yığınları, kaydırmalı satırları, boşlukları, iç boşlukları ve hizalamayı çıkarır.
- Responsive anlamı çevirir: ortalanmış içerik Center olur, max-width kutular ortada kalır, eşit kartlar ve flex-grow öğeleri Fill olur, bir logo ile menü arasındaki boşluk bir Fill öğesine dönüşür.
- Planı uygular ve her alt öğenin konumunu 2 px içinde doğrular.
- Tutmazsa daha basit bir plan dener; olmazsa absolute konumları korur.
Absolute kalan frame'ler Stretch, Scale, Center, Min veya Max gibi kısıtlamalar alır; böylece yeniden boyutlandırıldıklarında yine düzgün davranırlar. Sonuç ekranı her birinin neden absolute kaldığını listeler.
Gerçek siteler üzerindeki testlerimizde Auto Layout, frame'lerin yaklaşık yüzde 86 ile 97'sinde çıkarıldı. Önemli olan sayı değil, arkasındaki garanti: tasarım asla bozulmaz. CSS'in frame'lere nasıl eşlendiği hakkında daha fazlası CSS flexbox ve grid'den Auto Layout'a yazısında.
Tek sayfa, birkaç ekran: Responsive set
Tek bir frame bir kırılma noktasını gösterir. Gerçek tasarım işi genellikle en az üçüne ihtiyaç duyar. Responsive set seçeneğiyle HTML to Frames aynı sayfanın Desktop, Tablet ve Mobile ekranlarını tek tıkla yakalar.
Birkaç pratik ayrıntı:
- Bir sayfanın ekranları birbiri ardına değil, paralel olarak yakalanır.
- Tüm ekranlarıyla bir sayfa üç değil, bir içe aktarma sayılır.
- Pro ve Team içe aktarma başına dörde kadar ekrana izin verir; Free plan içe aktarma başına bir ekran yakalar.
- Her ekran kendi üst düzey frame'idir ve bir bakışta ayırt edebilmeniz için ekran adı ve genişliğiyle adlandırılır.
Her ekran gerçek genişliğinde yakalandığı için, daraltılmış bir desktop frame'i değil, sitenin gerçek mobil yerleşimini alırsınız. Bir menü butonuna dönüşen navigasyon, dört sütundan bire düşen ızgaralar ve küçülen tipografi, sitenin o genişlikte işlediği gibi görünür; bu da seti responsive tasarım incelemeleri için güvenilir bir başlangıç noktası yapar.
Birkaç sayfayı farklı kırılma noktalarında yakalamak için Responsive set'leri Multiple içe aktarma ile birleştirin ve limitleri fiyatlandırma sayfasında kontrol edin.
Sıkça sorulan sorular
Her web sayfasının ve ekranının, içinde sayfanın DOM yapısını yansıtan iç içe frame'ler bulunan bir Figma frame'ine dönüşmesi anlamına gelir. HTML to Frames her sayfa ve ekran için bir üst düzey frame oluşturur ve sonucun doğrulanabildiği her yerde iç frame'leri Auto Layout'a dönüştürür.
Üst düzey frame'ler domain/path?query — Screen (width) kalıbını izler, örneğin example.com/pricing — Desktop (1920). Protokol ve www kaldırılır ve adlar 60 karakterle sınırlı tutulur; böylece büyük, çok sayfalı içe aktarmalar tuvalde ve katmanlar panelinde kolayca taranır.
Desktop genişliği gerçek tasarımdan ölçülür. Tam genişlikli tasarımlar içerik kutusu ortalanmış 1920 alır, gerçekten kutulu siteler 1200 veya 1440 gibi kendi kutu genişliğini, akışkan siteler 1440 alır. Bir site, çok sayfalı bir içe aktarmada tek bir genişliği korur.
Her zaman değil. Auto Layout yalnızca her alt öğe orijinal konumunun 2 px yakınında kaldığında uygulanır. Aksi halde daha basit bir plan denenir; o da başarısız olursa frame kısıtlamalarla absolute konumlarını korur. Sonuç ekranı her frame'in neden absolute kaldığını açıklar.
Free, içe aktarma başına bir ekran yakalar. Pro ve Team, Desktop, Tablet ve Mobile'dan oluşan tek tıklık Responsive set dahil içe aktarma başına dörde kadar ekran yakalar. Bir sayfanın tüm ekranları tek bir içe aktarma sayılır ve birbiri ardına değil, paralel olarak yakalanır.
Evet. İçe aktarılan her frame kaynak URL'sini ve genişliğini saklar; böylece canlı sayfa değiştiğinde onu tek tıkla yeniden içe aktarabilirsiniz. Bu, sıfırdan yeni bir içe aktarma başlatmadan veya frame'leri yeniden adlandırmadan tasarım dosyasını canlı ürünle uyumlu tutar.
İlgili
Web'i yeniden çizmeyi bırakın.
Bir bağlantı yapıştırın, saniyeler içinde gerçek, düzenlenebilir ve responsive Figma katmanları alın. Başlamak ücretsiz: her ay 10 içe aktarma.
Kredi kartı gerekmez. Pro, Figma içinden satın alınır.
Yakında Figma Community'de