CSS to Figma Auto Layout: flexbox ve grid eşleme rehberi

Front-end kodu yazıyorsanız, Figma'nın Auto Layout'u size tanıdık gelir: bir yön, bir boşluk (gap), iç boşluk (padding), hizalama, içeriğe sarılan (hug) veya dolduran (fill) alt öğeler. CSS'ten Figma Auto Layout'a geçişin birebir bir çeviri olduğunu varsaymak cazip gelir. Öyle değildir. Flexbox ve Grid daha zengindir; tarayıcı, Auto Layout'un modellemediği margin'leri, yüzdeleri ve içsel boyutları çözümler; aynı görsel sonuç çok farklı CSS'lerden gelebilir.

Bu rehber, HTML to Frames'in CSS yerleşimlerini Auto Layout'a nasıl eşlediğini, her sonucun neden tarayıcıya karşı doğrulandığını, sınırların nerede olduğunu ve temiz içe aktarılan CSS'in nasıl yazılacağını açıklıyor.

Yaklaşım: önce geometri, sonra çıkarım

Saf bir dönüştürücü display: flex'i okur ve özellikleri aktarır. Bu hızla bozulur: gap: 0 olan ve alt öğelerinde margin bulunan bir flex kapsayıcısı, yalnızca dikey bir yığın gibi görünen bir blok öğe ya da iki düzgün satır halinde işlenen bir grid.

HTML to Frames, tarayıcının gerçekte işlediği şeyden yola çıkar:

1. Piksel piksel birebir kurun. Sayfa önce Figma'da, tarayıcının ölçtüğü geometriden alınan absolute konumlarla kurulur.
2. İçten dışa dolaşın. En derindeki frame'lerden başlayarak eklenti, konumlardan ve boyutlardan dikey yığınları, yatay yığınları, kaydırmalı satırları, boşlukları, iç boşlukları ve hizalamayı çıkarır.
3. Responsive anlam ekleyin. Ortalanmış içerik Center olur, max-width kutular ortada kalır, eşit kartlar ve flex-grow Fill olur; “logo … menü … ikonlar” çubuğunda ise boşluk öğesi Fill olur.
4. Doğrulayın. Auto Layout uygulanır, ardından her alt öğenin konumu orijinaliyle 2 px toleransla karşılaştırılır.
5. Güvenle geri çekilin. Tutmazsa daha basit bir plan denenir. O da başarısız olursa frame, mantıklı kısıtlamalarla (Stretch, Scale, Center, Min, Max) absolute konumlarını korur.

Çıkarım işlenmiş geometriden başladığı için, blok öğelerden oluşan bir yığın tıpkı bir flex sütunu gibi dikey bir Auto Layout'a dönüşür. CSS mekanizması sonuçtan daha az önemlidir. Daha geniş bir genel bakış için Auto Layout'un açıklaması yazısına bakın.

Eşleme tablosu

Yaygın CSS kalıplarının tipik olarak nasıl eşlendiği aşağıda. Bunu bir söz değil, beklenen sonuç olarak değerlendirin; son sözü doğrulama söyler.

Ayrıntılı flexbox

Yön ve sıra

flex-direction, bir kapsayıcının yatay mı yoksa dikey bir yığın mı olacağını belirler. Çıkarım işlenmiş konumları kullandığı için ters yönler ve order yalnızca görsel sırayla katmanlar üretir. Tarayıcıda ne görüyorsanız katmanlar panelinde de onu alırsınız.

Gap ve padding

gap en temiz girdidir: alt öğeler arasında doğrudan Auto Layout öğe aralığına eşlenen tek ve tutarlı bir mesafe. Kardeşler arasındaki margin'ler tutarlı olduklarında işe yarar. Tutarlı olmadıklarında, örneğin 16, 24, 16, eklenti bunu tek bir gap olarak temsil edemez ve doğrulama ya başka bir plan seçer ya da konumları absolute tutar.

Padding, alt öğelerin kapsayıcı içinde gerçekte nerede durduğundan ölçülür; böylece padding, border kalınlıkları ve iç margin'ler sonuca katkıda bulunur.

Justify ve align

justify-content ana eksen hizalamasına, align-items karşı eksen hizalamasına eşlenir. İlginç durum space-between'dir. “logo … menü … ikonlar” gibi bir header'da eklenti boşluk öğesini Fill'e dönüştürür; böylece yeniden boyutlandırmada logo solda, ikonlar sağda kalır ve orta kısım esner. Yalnızca tek bir genişlikte çalışan sabit bir aralık değeri yerine beklediğiniz responsive anlam budur.

flex-grow ve Fill

flex-grow veya flex: 1 içeren alt öğeler Fill container olur. Eşit kart satırları eşit Fill öğelerine dönüşür; böylece üst frame'i yeniden boyutlandırmak kartları da tarayıcıdaki gibi birlikte yeniden boyutlandırır.

Satır kaydırma

flex-wrap: wrap, Auto Layout'un wrap moduna eşlenir ve kaydırmalı satırlar üretir. Bu, flexbox ile oluşturulmuş etiket listeleri, logo duvarları ve kart ızgaraları için doğal bir eşleşmedir.

Ayrıntılı CSS Grid

Figma'nın Auto Layout'u iki boyutlu bir ızgara değil, bir yığın modelidir. Bu nedenle grid yerleşimleri, doğrulanan en yakın yapıya eşlenir:

• Düzenli ızgaralar (eşit sütunlar, eşit boşluklar) genellikle kaydırmalı satırlar olur.
• Asimetrik ızgaralar (bir kenar çubuğu ve ana sütun, 2:1 bölünme) genellikle iç içe yığınlar olur: dikey yığınlardan oluşan yatay bir yığın ya da tersi.
• Yığınlara ayrıştırılamayan span'li ve çakışan hücreler, kısıtlamalarla absolute konumlarını korur.

Her durumda görsel sonuç tolerans içinde tarayıcıyla eşleşir. Değişen, frame'in ne kadarını Figma'da akışkan şekilde yeniden boyutlandırabileceğinizdir.

Absolute konumlandırma, ortalama ve auto margin'ler

position: absolute

Absolute konumlu bir rozet, dekoratif bir şekil veya bir kaplama katmanı bir yığına ait değildir, çünkü kardeşleriyle çakışır. Bu öğeler absolute konumlarını korur ve eklenti onlara kısıtlamalar atar; böylece üst öğe yeniden boyutlandırıldığında yine mantıklı davranırlar: sağ üste sabitlenmiş bir rozet sağ üstte kalır, tam kaplayan bir katman esner.

max-width ve margin: auto

Klasik içerik kapsayıcısı max-width: 1200px; margin: 0 auto, tam genişlikli bir frame içinde ortalanmış bir kutuya dönüşür. Site width de burada devreye girer: eklenti içe aktarma sırasında sayfanın gerçek tasarım genişliğini ölçer. Tam genişlikli tasarımlar içerik kutusu ortalanmış 1920, gerçekten kutulu siteler kendi kutu genişliklerinde, akışkan siteler 1440 genişliğinde gelir. Ölçülen değer, kapsayıcı mantığınızı korur.

Flex içinde auto margin'ler

Bir flex alt öğesindeki margin-left: auto onu sona iter; navigasyon çubukları için yaygın bir kalıptır. space-between gibi bu da geometriden çıkarılır; tipik olarak itilen öğeyi en uç kenarda tutan bir Fill boşluk öğesi olarak.

Doğrulama neden önemli

Doğrulama olmadan dönüştürücülerin iki kötü seçeneği vardır: Auto Layout'u her yere uygulayıp bazı frame'lerin kaymasını, çakışmasını veya çökmesini kabullenmek ya da Auto Layout'tan kaçınıp size donmuş absolute katmanlar vermek.

HTML to Frames Auto Layout'u uygular, ardından her alt öğenin konumunu 2 px içinde kontrol eder. Bir frame başarısız olursa daha basit bir plan denenir; o da başarısız olursa frame absolute kalır. Tasarım asla bozulmaz. Figma'da gördüğünüzün tarayıcıyla eşleştiğine güvenebilirsiniz ve aldığınız Auto Layout gerçekten tutan bir Auto Layout'tur.

Sonuç ekranı genel Auto Layout oranını gösterir ve absolute kalan frame'ler için nedenini listeler (tanılama). Bu, “bu neden Auto Layout değil?” sorusunu CSS'inizde üzerinde işlem yapabileceğiniz bir şeye dönüştürür.

Gerçek siteler üzerindeki testlerimizde Auto Layout, frame'lerin yaklaşık yüzde 86 ile 97'sinde çıkarıldı; örneğin bir ürün sitesinde yüzde 93, Linear ve Stripe'ta yüzde 88. Sizin sonuçlarınız CSS'in nasıl yazıldığına bağlıdır.

Bilinmesi gereken sınırlamalar

• İki boyutlu grid anlamı Auto Layout'ta yoktur; ızgaralar kaydırmalı satırlara veya iç içe yığınlara dönüşür, karmaşık span'ler absolute kalabilir.
• Kardeşler arasındaki tutarsız boşluklar tek bir gap olarak ifade edilemez.
• Çakışma (negatif margin'ler, absolute alt öğeler) bu öğeleri absolute tutar.
• Skew ve 3D dönüşümler, path() clip-path'leri, çok katmanlı maskeler ve Display-P3 renkleri henüz dönüştürülmüyor.
• Iframe'ler, WebGL canvas'ları ve poster görseli olmayan videolar gibi gömülü içerikler, kutularının ekran görüntüsü olarak gelir.
• Her seferinde tek genişlik. Her ekran kendi genişliğinde yerleştirilir. Her kırılma noktasını ayrı bir frame olarak yakalamak için Responsive set'i (Desktop, Tablet, Mobile) kullanın.

İpuçları: temiz içe aktarılan CSS yazın

Bu alışkanlıklar yerleşimlerinizin daha sık Auto Layout'a eşlenmesini sağlar; zaten iyi CSS pratikleridir.

1. Kardeş margin'leri yerine gap kullanın. Tek ve tutarlı bir değer doğrudan öğe aralığına eşlenir.
2. Bir kapsayıcı içinde boşlukları tutarlı tutun. Karışık boşluklar geri çekilmelere yol açar.
3. Tek boyutlu yerleşimler için flexbox'ı tercih edin. Navigasyonlar, araç çubukları, buton grupları ve kart satırları doğrudan eşlenir.
4. Kart ızgaraları için eşit izli grid kullanın. Düzenli sütunlar temiz kaydırmalı satırlara dönüşür.
5. Asimetrik yerleşimleri açık kapsayıcılara sarın. Kendi flex satırındaki bir kenar çubuğu ve içerik alanı net iç içe yığınlar üretir.
6. Esnemesi gereken öğeler için flex: 1 kullanın. Fill'e işaret eder.
7. İçeriği max-width ve margin: 0 auto ile ortalayın. Ortada kalan, ortalanmış bir kutuya dönüşür.
8. position: absolute'u gerçek kaplama katmanlarına ayırın. Sıradan yerleşim için kullanmayın.
9. Yerleşim için negatif margin'lerden kaçının. Yığınlanamayan çakışmalar yaratırlar.
10. Renkleri custom property'lerle adlandırın. Styles & variables (Pro) ile --brand-primary, bir brand/primary değişkenine dönüşür.
11. Gerçek metin kullanın. Görsellerdeki metin, düzenlenebilir metin katmanlarına dönüşemez.

Kendi eşlemenizi görmek

CSS'inizin nasıl eşlendiğini öğrenmenin en hızlı yolu onu içe aktarmaktır. HTML to Figma akışıyla kod yapıştırın veya bir klasör yükleyin, yerel bir build'i Chrome uzantısıyla yakalayın ya da bir yapay zekâ aracının onu MCP üzerinden göndermesini sağlayın. Ardından sonuç ekranını açın, Auto Layout oranını kontrol edin ve absolute kalan frame'ler için tanılamayı okuyun.

İçe aktarma ile tarayıcı işlemesi arasında geçiş yapabilmek için orijinal sayfanın gizli, kilitli bir katmanını eklemek üzere Reference screenshot'ı (Pro) açın. Daha ayrıntılı bir katman yapısı istediğinizde Detailed layers'ı (Pro) açın.

Sayfaların nasıl frame'lere dönüştüğü hakkında daha fazlası için HTML to frame dönüşümünü okuyun; içe aktarıcının desteklediği her şey için özelliklere bakın. Dokümantasyon her içe aktarma seçeneğini ayrıntılı olarak anlatıyor.