HTML to Frame: bir DOM nasıl Figma Auto Layout'a dönüşür

Bir web sayfasını resme dönüştürmek kolaydır. Onu bir tasarımcının kurduğu gibi davranan Figma frame'lerine dönüştürmek ise zor kısımdır. Doğru görünen ama bir başlığı düzenlediğiniz anda çöken bir frame, ekran görüntüsünden pek de iyi değildir.

Bu yazı, HTML to Frames'in bir DOM'u iç içe Figma frame'lerine nasıl dönüştürdüğünü, Auto Layout motorunun neyin yığın olacağına nasıl karar verdiğini ve kendi işini korumadan önce neden kontrol ettiğini adım adım açıklıyor.

DOM'dan frame ağacına

Bir web sayfası bir ağaçtır: body bölümleri, bölümler kapsayıcıları, kapsayıcılar kartları, kartlar başlıkları ve butonları içerir. Bir Figma dosyası da bir ağaçtır: frame'ler frame'leri, metinleri ve vektörleri içerir.

HTML to frame dönüşümünün temel fikri bir ağacı diğerine eşlemektir:

• Her sayfa ve ekran bir üst düzey frame olur. Bir sayfanın Desktop, Tablet ve Mobile içe aktarması yan yana üç frame üretir.
• Kutu gibi davranan öğeler iç içe frame'ler olur. Arka planları, kenarlıkları, köşe yarıçapları, gölgeleri ve kırpmaları frame özelliklerine dönüşür.
• Metin, karışık stilleri korunarak metin katmanlarına dönüşür; böylece kalın bir bağlantı içeren bir cümle tek bir metin katmanı olarak kalır.
• SVG düzenlenebilir vektörlere, görseller görsel dolgularına dönüşür.
• Sözde öğeler (::before, ::after), shadow DOM içeriği ve z-index sırası aktarılır; böylece istifleme tarayıcının çizdiğiyle eşleşir.

Amaç, her DOM düğümünün döküldüğü bir yığın değil, bir tasarımcının okuyabileceği bir katmanlar panelidir. İnceleme için daha ayrıntılı bir katman yapısına ihtiyacınız varsa Detailed layers seçeneği (Pro) bunun için var.

Frame adlandırma

Üst düzey frame'ler, büyük bir dosyada bulabilmeniz için şöyle adlandırılır:

example.com/pricing — Desktop (1920)

Ad, alan adını ve yolu (varsa sorgu parametreleriyle birlikte) içerir; protokol ve www yoktur, ardından ekran ve genişliği gelir ve 60 karakterle sınırlıdır. Kaynak URL de frame'de saklanır; tek tıkla Re-import'u mümkün kılan budur.

Adım 1: Önce piksel piksel birebir kurun

Motor işe Auto Layout'u tahmin ederek başlamaz. Doğru görünmesi garanti olan bir sürümle başlar:

1. Sayfa, seçilen genişlikte gerçek bir tarayıcıda işlenir. Desktop için bu Site width'tir: eklentinin sayfanın gerçek tasarımından ölçtüğü genişlik (tam genişlikli tasarımda 1920, kutulu sitelerde kutu genişliği, akışkan sitelerde 1440).
2. Her öğenin geometrisi ve hesaplanmış stilleri ölçülür.
3. Frame ağacı absolute konumlarla kurulur; böylece her katman tam olarak tarayıcının koyduğu yerde durur.

Bu absolute sürüm güvenlik ağıdır. Ondan sonraki her şey, kendini kanıtlaması gereken bir iyileştirmedir.

Adım 2: Auto Layout'u içten dışa çıkarın

Ardından motor frame'leri en içten dışa doğru dolaşır. Her frame için alt öğelerinin ölçülen geometrisine bakar ve sorar: bunlar bir Auto Layout yığını olarak tanımlanabilir mi?

Şunları çıkarır:

• Yön: alt öğeler dikey mi yoksa yatay bir yığın halinde mi dizilmiş?
• Satır kaydırma: kartlardan oluşan bir CSS grid'i veya flex-wrap gibi kaydırmalı satırlar mı oluşturuyorlar?
• Gap: alt öğeler arasındaki aralık tek bir gap değeri olacak kadar tutarlı mı?
• Padding: alt öğeler frame'in her bir kenarından ne kadar uzakta?
• Hizalama: her eksende başa, ortaya veya sona mı hizalanmışlar?

İçten dışa çalışmak önemlidir: bir kartın içeriği temiz bir dikey yığın olduğunda, kartın kendisi etrafındaki kart satırında tek bir öğe olarak ele alınabilir.

En önemlisi, çıkarım CSS'i ayrıştırmaya değil, tarayıcının gerçekte işlediğine dayanır. Bir satır flexbox, grid, float veya inline-block ile yapılmış olsun, ölçülen sonuç aynıdır ve motorun üzerinde çalıştığı şey de budur.

Adım 3: Responsive anlam ekleyin

Doğru gap ve padding'e sahip bir yığın bir başlangıçtır, ancak henüz responsive bir tasarım gibi davranmaz. Motor ayrıca niyeti de çıkarır:

• Ortalanmış içerik → Center. İçerik üst öğesinde ortalanmışsa Center hizalanır; böylece frame yeniden boyutlandırıldığında ortada kalır.
• Max-width kutular ortada kalır. Tam genişlikli bir bölüm içinde maksimum genişliğe sahip bir içerik kapsayıcısı genişliğini korur ve ortada durur.
• Eşit kartlar ve flex-grow → Fill. Bir satırı eşit paylaşan kartlar ya da alanı doldurmak için büyüyen öğeler Fill container olarak ayarlanır.
• Logo … menü … ikonlar → boşluk öğesi Fill olur. Tipik bir header'da esneyen şey gruplar arasındaki boşluktur. Motor bu boşluk öğesini Fill yapar; böylece header genişledikçe logo solda, ikonlar sağda kalır.

Bu, tek bir genişlikte sayfayla eşleşen bir frame ile gerçekten yeniden boyutlandırabileceğiniz bir frame arasındaki farktır.

Adım 4: Her alt öğeyi doğrulayın (2 px tolerans)

Tasarımı sağlam tutan kısım burasıdır. Bir frame'e bir Auto Layout planı uyguladıktan sonra motor, her alt öğenin konumunu orijinal piksel piksel birebir yerleşimle karşılaştırır. Her biri, tarayıcının koyduğu yerin 2 px yakınına düşmelidir.

• Her alt öğe tutarsa plan korunur.
• Tutmazsa daha basit bir plan denenir; örneğin daha iddialı hizalama veya Fill ayarları olmayan tek bir yığın.
• Hiçbir plan tutmazsa frame absolute konumlarını korur.

Kural basittir: tasarım asla bozulmaz. Zorlu bir bölümde daha az Auto Layout frame'i alabilirsiniz, ama sessizce kayan bir yerleşim almazsınız.

Ne sıklıkla başarılı oluyor? Gerçek siteler üzerindeki testlerimizde Auto Layout, frame'lerin yaklaşık %86–97'sinde çıkarıldı; örneğin bir ürün sitesinde %93, Linear ve Stripe'ta %88. Sonuçlar sayfanın nasıl yapıldığına bağlıdır; bu yüzden bunları bir garanti değil, ölçüm olarak değerlendirin.

Adım 5: Absolute kalan frame'ler için kısıtlamalar

Absolute konumlarını koruyan frame'ler kendi haline bırakılmaz. Motor onlara mantıklı kısıtlamalar (constraints) verir:

• Stretch: tam genişlikli bir arka plan katmanı gibi üst öğesini boydan boya kaplayan öğeler için.
• Scale: orantılı olarak yeniden boyutlanması gereken öğeler için.
• Center: üst öğesinde ortalanmış öğeler için.
• Min: sola veya üste sabitlenmiş.
• Max: sağa veya alta sabitlenmiş.

Böylece absolute bir frame bile üst öğesini yeniden boyutlandırdığınızda makul şekilde davranır.

Adım 6: Tanılama — bir frame neden absolute kaldı

Sonuç ekranı içe aktarma için frame'leri, katmanları ve Auto Layout oranını, eksik fontlar ve uyarılarla birlikte raporlar. Ayrıca belirli frame'lerin neden absolute kaldığını listeler. Pratikte absolute kalan bölümler genellikle alt öğelerin çakıştığı, normal akışın dışında durduğu ya da tek bir yığın olarak tanımlanamayacak kadar düzensiz aralıklarla yerleştiği bölümlerdir.

Bu tanılama iki şekilde yararlıdır:

• Tasarımcılar için: tamamen responsive olmalarına ihtiyacınız varsa hangi bölümleri elle dönüştüreceğinizi bilirsiniz.
• Geliştiriciler için: çoğu zaman gerekenden daha karmaşık yerleşim koduna dair bir ipucudur.

CSS flexbox ve grid'den Auto Layout'a: bir eşleme tablosu

Motor ölçülen geometriden çalıştığı için aşağıdaki eşleme, CSS özelliklerinin birebir çevirisini değil, tipik sonucu tanımlar. Daha derinlemesine bir inceleme için CSS flexbox ve grid'den Figma Auto Layout'a yazısına bakın.

Uygulamalı bir örnek: üç kartlı bir fiyatlandırma bölümü

Adımları somutlaştırmak için yaygın bir bölüm düşünün: üstte ortalanmış bir başlık ve alt başlık, ardından bir satırda her birinde plan adı, fiyat, özellik listesi ve buton bulunan üç fiyat kartı.

Motorun buna tipik olarak nasıl yaklaşacağı:

1. Piksel piksel birebir kurulum. Her öğe ölçülen konumuna yerleştirilir. Bölüm zaten doğru görünür.
2. Önce en içteki frame'ler. Her özellik listesi tutarlı bir gap'e sahip dikey bir yığın olur. Her kart, padding'i kartın kenarlarına olan mesafeden alınan dikey bir yığın olur: ad, fiyat, liste, buton.
3. Kart satırı. Üç kart eşit genişliklerde ve eşit aralıklarla yan yana durur; böylece satır tek bir gap'e sahip yatay bir yığın olur ve her kart, genişliği eşit paylaşmaları için Fill olarak ayarlanır.
4. Başlık bloğu. Başlık ve alt başlık ortalanmıştır; bu yüzden Center hizalı dikey bir yığın olurlar.
5. Doğrulama. Her frame'in her alt öğesi orijinal konumuyla karşılaştırılır. Örneğin bir “En popüler” rozeti ortadaki kartın üst kenarıyla çakışıyorsa, o kartın planı 2 px kontrolünden geçemeyebilir. Motor daha basit bir plan dener; o da tutmazsa kart kısıtlamalarla absolute konumlarını korur ve sonuç ekranı size bunun hangi frame olduğunu söyler.

Sonuç, yeniden boyutlandırabileceğiniz bir bölümdür: frame'i genişletin, kartlar birlikte büyür; bir özellik listesini düzenleyin, kart da onunla birlikte büyür. Components & hover states (Pro) ile üç kart aynı yapıyı paylaştıkları için tek bir bileşenin instance'ları olarak da gelebilir.

Bunun pratikteki anlamı

İçe aktarılmış bir sayfayı açtığınızda şunları yapabilirsiniz:

• Bir başlığı düzenleyin, bölüm büyür ve altındaki içeriği aşağı iter.
• Bir kart ızgarasını sıkılaştırmak için tek bir gap değerini değiştirin.
• Frame'i yeniden boyutlandırın ve ortalanmış içerik yerinde kalırken Fill öğelerinin esnediğini izleyin.
• Bir kartı bir bileşen instance'ıyla değiştirin; Components & hover states (Pro) ile tekrarlanan kartlar zaten bileşen olabilir.

Bir frame ağacını düzleştirilmiş bir görselden ayıran budur. HTML to canvas karşılaştırması bu farkı daha ayrıntılı ele alıyor.

Daha iyi Auto Layout sonuçları için ipuçları

1. Doğru genişlikte içe aktarın. Desktop'un Site width kullanmasına izin verin ve her kırılma noktasını kontrol edebilmek için Responsive set ile Tablet ve Mobile ekleyin.
2. Katmanları gizleyin. Sabit diyalogların bölümlerle çakışıp absolute konumlandırmayı zorlamaması için Hide cookie banners & popups'ı açın.
3. Kararlı durumları yakalayın. Animasyonlar yakalama anında dondurulur, ancak geç yüklenen içerik için Extra wait (Pro) yardımcı olur.
4. Herhangi bir şeyi elle dönüştürmeden önce tanılamayı kontrol edin. Tam olarak hangi frame'lere bakmanız gerektiğini söyler.
5. Katmanların canlı sayfayla eşleştiğini doğrulamanız gerektiğinde Reference screenshot (Pro) kullanın.

Daha fazla bilgi

• İçe aktarma akışının tamamı: HTML'i Figma'ya nasıl dönüştürürsünüz
• Tüm dönüştürme özellikleri: özellikler
• Her seçenek, açıklamalarıyla: dokümantasyon
• Planlar ve limitler: fiyatlandırma

Eklentiyi edinin ve iyi bildiğiniz bir sayfayı içe aktarın. Motoru anlamanın en hızlı yolu, sonucu yeniden boyutlandırıp neyin tuttuğunu görmektir.