Figma Otomatik Düzen ile CSS Flexbox ve Grid Karşılaştırması: Tasarım-Kod Arasındaki Boşluğun Kapatılması
Figma otomatik düzeninin CSS flexbox ve ızgarayla (yön, boşluk, dolgu, kucaklama, doldurma, sarma) nasıl eşleştiği ve bunların nerede farklılaştığı, böylece tasarımların aktarımdan sonra hayatta kalması sağlanır.
Ana nokta
Figma'in otomatik düzeni, CSS flexbox'a çok benzer şekilde davranır: yön, esnek yöne eşlenir, boşluktan boşluğa, dolgudan dolguya, "İçeriği kucaklama" içeriğe göre boyutlandırmaya, "Kabı doldur" esnek büyümeye veya tam genişliğe ve esnek sarmaya sarma. Otomatik düzenin ızgara akışı CSS ızgarasına karşılık gelir. Minimum ve maksimum boyutlarda, metin kaydırmada, taban çizgisi hizalamasında ve yanıt veren kesme noktalarında farklılıklar görünür; bu nedenle bunları teslim sırasında açıkça kontrol edin.
haritalama
Figma'in kılavuzu, yatay, dikey ve ızgara akışları ve isteğe bağlı bir sarma ile çocukları yöne, aralığa, dolguya ve hizalamaya göre düzenleyen otomatik düzen çerçevelerini açıklar. Her birinin yakın bir CSS eşdeğeri vardır:
Sarıl, doldur ve sabitle
Figma'te, içerikleri kucaklayacak bir çerçeve kümesi alt öğelerine göre yeniden boyutlandırılır ve kabı dolduracak bir alt küme, mevcut alanı dolduracak şekilde genişler; Figma, eğer bir çocuk doldurmaya ayarlanmışsa ebeveynin artık o yönde kucaklaşamayacağını belirtiyor. CSS'te eşdeğerler içeriğe dayalı boyutlandırmadır (otomatik veya içeriğe sığdır) ve esnek: 1 veya genişlik: %100. MDN'in flexbox kılavuzu, aynı fikrin CSS tarafı olan flex-grow, flex-shrink ve flex-basis'in alanı nasıl dağıttığını açıklıyor.
Boşluğun göründüğü yer
Aktarma hatalarının çoğu birkaç alandan kaynaklanır:
- Minimum ve maksimum boyutlar: bunları her iki yerde de ayarlayın, aksi takdirde metin ve kapsayıcılar uç noktalarda farklı davranır.
- Metin: satır yüksekliği, kaydırma ve kesme, Figma metin oluşturma ve tarayıcı arasında farklılık gösterir.
- Taban çizgisi hizalaması: CSS metin taban çizgisine göre hizalayabilir; bunun nasıl tasarlandığını kontrol edin.
- Mutlak çocuklar: Figma'in "Otomatik düzeni yoksay" (önceden mutlak konum) konumlanmış bir ebeveynde konum: mutlak ile eşleşir.
- Duyarlılık: otomatik düzen çerçevelerinin kesme noktaları yoktur; Düzenlerin her genişlikte nasıl değişeceğini tanımlayın.
Izgaralar
Gerçek iki boyutlu düzenler için otomatik düzenin ızgara akışını kullanın ve bunu, MDN'in içeriği satırlar ve sütunlar halinde düzenlemeye yönelik bir sistem olarak tanımladığı CSS ızgarasıyla eşleştirin. Sarılmış esnek satırlar ızgarayla aynı değildir: sarılmış satırdaki öğeler sütunlarda sıralanmaz.
Hareket en büyük boşluktur
Düzen, Figma'ten CSS'e kadar oldukça iyi eşleşir. Hareket bunu yapmaz: prototip geçişlerinin kodda yeniden oluşturulması gerekir ve durumlar sıklıkla kaybolur. Bu, etkileşimli bileşenlerin adresi olan ExodeUI (biz yaparız) ve Rive gibi çalışma zamanlarına sahip boşluk araçlarıdır.
Hatırlanacak temel ilkeler
- Otomatik düzen yönü, boşluk, dolgu ve haritayı flexbox'a sarma
- Sarılma ≈ içerik boyutlandırma; Doldur ≈ esnek: 1 veya %100 genişlik
- Izgara akışı CSS ızgarasına eşlenir
- Aktarım sırasında minimum/maksimum boyutları, metni, taban çizgilerini ve kesme noktalarını kontrol edin
- Hareket ve durumlar tasarımdan koda daha büyük bir boşluktur
Sık sorulan sorular
Kaynaklar
- Guide to auto layout — Figma Help Center
- Basic concepts of flexbox — MDN Web Belgeleri
- Basic concepts of grid layout — MDN Web Belgeleri