HTML to design: kodunuzun uzaklaştığı tasarım dosyasını yeniden kurun

Canlı bir sayfayı Figma'da gözle yeniden kurmak; boşlukları ölçmek, renkleri örneklemek, font boyutlarını tahmin etmek ve ikonları yeniden çizmek demektir. Tek bir pazarlama sayfası bir gün sürebilir. Onlarca ekranlı bir ürün haftalar alır ve sonuç yine de gerçek değerlerden sapar.

HTML to Frames değerleri doğrudan tarayıcıdan okur; böylece boşluklar, renkler ve yazı boyutları yaklaşık değil, birebirdir. SVG ikonlar düzenlenebilir vektörlere dönüşür. Yerleşim Auto Layout'a çevrilir ve 2 px içinde doğrulanır; absolute konumlandırma yalnızca Auto Layout'un bir şeyin yerini değiştireceği yerlerde korunur.

Bu, bir yeniden tasarımın ilk gününün nasıl geçtiğini değiştirir. Ekip o günü yeniden inşaya harcamak yerine mevcut ürünün doğru bir kopyasıyla başlar ve zamanını kararlara ayırır:

• Hangi renkler gerçekten kullanılıyor, hangileri tesadüfi, neredeyse aynı kopyalar?
• Hangi bileşenler tekrar ediyor ve sahada kaç varyant var?
• Yayındaki yerleşim, hedeflenen sistemden nerede ayrılıyor?

Website to Figma yeniden tasarım rehberi, ajansların bunu teklif hazırlamak için nasıl kullandığını anlatır.

Her frame kaynak URL'sini koruduğu için, bir sonraki sürümden sonra bir sayfayı yeniden içe aktarıp yeniden tasarımla karşılaştırabilirsiniz. Tasarım dosyası, yavaş yavaş eskiyen bir başka anlık görüntü olmak yerine canlı ürüne bağlı kalır.

Çıkarma işlemi, öğe başına bir stil yerine küçük ve kullanışlı bir set üretecek şekilde tasarlanmıştır.

Renkler

Bir renk, en az iki kez kullanıldığında ya da site onu bir CSS custom property olarak tanımladığında değişkene dönüşür. Custom property adları yapı olarak korunur: --brand-primary, brand/primary olur. 96'ya kadar renk değişkeni bir Colors · <domain> koleksiyonuna gider.

Metin ve gölgeler

Sayfada gerçekten işlenen tipografiden 48'e kadar metin stili oluşturulur. Gölgeler sm, md, lg ve xl stillerinde gruplanır.

Oluşturmadan önce yeniden kullan

Dosyanızda aynı değere sahip bir değişken veya stil zaten varsa yeniden kullanılır. Aynı siteyi iki kez içe aktarın, yeni hiçbir şey oluşturulmaz; bu da uzun ömürlü bir dosyayı düzenli tutar.

Light + Dark

Light + Dark renk şemasıyla sayfa her iki prefers-color-scheme ayarında yakalanır ve tek bir koleksiyon iki mod alır. Figma Free dosyaları koleksiyon başına yalnızca bir moda izin verir; bu durumda dark mod bir notla atlanır.

Buradaki her şey isteğe bağlıdır. Styles & variables'ı kapatırsanız ham değerli düz katmanlar alırsınız; hızlı bir referans veya tek seferlik bir inceleme için bazen istediğiniz tam olarak budur.

Canlı kod nadiren bir tasarım sistemiyle mükemmel şekilde eşleşir. Bir buton, token #2160E8 iken #2161E9 kullanıyor olabilir ya da bir başlık 32 px yerine 31 px olabilir. Bu değerleri olduğu gibi içe aktarmak dosyanızı neredeyse aynı stillerle doldurur.

Snap to my file's styles bunu çözer. Birebir eşleşme olmadığında eklenti, algısal OKLab mesafesini kullanarak dosyanızdaki en yakın rengi ve aynı font ailesi ve ağırlığına sahip, boyutu %10 içinde olan en yakın metin stilini arar. İçe aktarılan katmanlar yeni stillere değil, sizin stillerinize bağlanır.

Bu üç durumda işe yarar:

1. Ürünü resmi sistemle ifade edilmiş olarak görmek istediğiniz denetimler.
2. İlk frame'den itibaren sisteme uygun başlaması gereken yeniden tasarımlar.
3. Başka bir yerleşimi kendi token'larınızla yeniden stillendirdiğiniz rakip incelemeleri.

Snap, Styles & variables ve Components & hover states Pro özellikleridir. Eklenti, dosyanızın içeriğini ihtiyaç duyduğundan fazla okumaz; güvenlik sayfasında açıklandığı gibi katman yazar ve yalnızca kendi frame'lerinin metadata'sını okur.

Snap, dosyanızda yayımlanmış renk ve metin stilleri zaten bulunduğunda en iyi sonucu verir. Küçük ve temiz bir kütüphaneyle başlayın, temsil edici bir sayfayı içe aktarın ve sitenin geri kalanında daha büyük bir Multiple içe aktarma çalıştırmadan önce hangi değerlerin oturduğunu kontrol edin.