Figma Make Nihayet Gerçek Bir Tasarım-to-Kod Aracına Dönüştü

Kısa özet: Figma Make artık bir front-end mühendisinin hemen silmeyeceği kod üretiyor. Tasarımcıların bunu konuşmasının tek nedeni bu ve bu, başka bir hız güncellemesinden çok daha büyük bir şey.

18 Haziran'da Figma, prodüksiyon kalitesinde bir Make güncellemesi yayınladı. Manşet "daha hızlı" değil. Manşet sadakat. Make artık eskiden ürettiği gevşek, tek seferlik markup yerine gerçek tasarım token'larınıza ve Code Connect eşlemelerinize bağlı bileşenler üretiyor.

Bu fark, bir parti numarası ile bir araç arasındaki çizgidir. Gereksiz kod çöpe gider. Sisteminize atıfta bulunan kod merge edilir.

Herkesin paylaştığı diff'ler

figma.com'da canlı görün

Bu güncelleme sınırları aştı çünkü insanlar kanıt gösteriyor. @figma duyuru thread'i günler içinde yaklaşık 9.200 repost'u geçti ve yanıtlar, kendi sistemleri üzerinde çalıştıran ekiplerin Figma'dan React'e yan yana diff'leriyle doldu.

Dikkat edilmesi gereken işaret bu. En yüksek sesli sinyal Figma'nın pazarlama metni değil, mühendislerin öncesi-sonrası diff'leri paylaşıp sonuçtan nefret etmemesi. Şüpheciler sustuğunda bir şeyler değişmiş demektir.

Tasarımcılar on yıldır "tasarımdan koda" vaatlerini duydu. Vaat her zaman gerçek bir kod tabanıyla karşılaşınca çöktü, çünkü çıktı kod tabanının üzerine inşa edildiği sistemi görmezden geliyordu. Bu sefer diff'ler bu karşılaşmadan sağ çıkıyor.

Gerçekte ne değişti (ham hex ve markup değil, token'lar ve Code Connect)

figma.com/make'de canlı görün

Eski Make bir frame okur ve gördüğünü tarif ederdi. Mavi bir buton görür ve #2D7FF9 yazardı. Padding görür ve piksel değeri yazardı. Sonuç doğru görünürdü ve hiçbir şeye bağlı değildi.

Yeni Make aynı frame'i okur ve sisteminizle karşılaştırarak çözümler. Mavi buton, donmuş bir hex değeri değil bir token referansına derlenir. Bileşen gerçek Code Connect eşlemenize derlenir, yani kod tabanınızdaki gerçek bileşene işaret eder; sıfırdan yeni bir tane icat etmek yerine.

Bir cümlede tüm değişim bu. Export, piksel tarif etmeyi bıraktı ve gerçek kaynak sisteminize atıfta bulunmaya başladı.

Pratikte neden önemli: Token referansları, kodunuzun tema değişikliklerini otomatik olarak devralması anlamına gelir. Token'ı değiştirdiğinizde her export onu takip eder. Code Connect eşlemeleri, export'un ekibinizin zaten bakımını yaptığı Button'ı yeniden kullanması anlamına gelir; birisi ona dokunduğu anda sürüklenen bir kopyasını oluşturmak yerine.

Eski Make çıktısı ile 18 Haziran güncellemesi

İşte karşılaştırma, çünkü karşılaştırma argümanın kendisidir.

Sağ sütun, bir pull request'e girebilecek tek sütundur. Sol sütun, kimsenin şimdiye kadar "tasarımdan koda" güvenmemesinin nedenidir.

Hâlâ sizin müdahalenizi gerektiren yerler

Make gövdeyi inşa eder, beyni değil. Bu çizgiyi abartmak kimseye faydası olmaz, bu yüzden 18 Haziran güncellemesinin sizin için yaptıklarının dürüst sınırı burada.

Layout, token'lar ve statik bileşen iskeletleri temiz çıkıyor. Karar gerektiren her şey hâlâ sizi gerektiriyor. Export, bir yükleme durumunun nasıl hissettirmesi gerektiğini, hata durumunda ne olacağını veya boş durumunuzun yönlendirip yönlendirmemesi ya da özür dileyip dilemeyeceğini bilmiyor.

Erişilebilirlik kendi satırını hak ediyor. Make, alt nitelikleri ve semantik-ish etiketleri koyabilir, ancak odak sırasına karar veremez, canlı bir bölge duyuramaz veya modal'ınızın odağı tuzağa düşürmesi ve geri döndürmesi gerektiğini anlayamaz. Bunlar, bir insanın arayüzünüzde nasıl hareket edeceğine dair karar çağrılarıdır ve karar verme export'un içinde değildir.

Gerçek veri, diğer sessiz katildir. Bir frame tek mükemmel satırı gösterir. Production, adı 40 karakter olan kullanıcıyı, null olan fiyatı, ilk günde boş olan listeyi gösterir.

Make mutlu yolu iskeletler. Gerçekliği siz ele alırsınız.

Bu hafta çalıştırabileceğiniz mantıklı bir Figma-Make-in-the-loop iş akışı

Sürecinizi baştan inşa etmenize gerek yok. Make'i doğru noktada yerleştirmeniz ve birleşim noktalarında bir insanı tutmanız yeterli. Bu hafta gerçek bir bileşen üzerinde çalıştırabileceğiniz bir versiyon burada.

1. Önce token'larınızı ve Code Connect'inizi gerçekten eşleyin. Bu, göz alıcı olmayan ön koşuldur. Make yalnızca atıfta bulunduğu sistem kadar iyidir; token'larınız yarı adlandırılmışsa ve Code Connect kapsamınız zayıfsa, export'u suçlamadan önce bunu düzeltin.
2. Make'i tüm bir ekran yerine iyi inşa edilmiş tek bir bileşen üzerinde çalıştırın. Net yapıya ve temiz bir token hikayesine sahip bir şey seçin. Sadakat test ediyorsunuz, mucize istemiyorsunuz.
3. Diff'i bir hayran olarak değil, kod inceleyicisi olarak okuyun. Token referanslarına çözümlenip çözümlenmediğini ve gerçek bileşeninize eşlenip eşlenmediğini doğrulayın. Bir hex değeri veya yinelenen bileşen icat ettiyse, o frame sistem-temiz değildi. Kaynağı düzeltin.
4. İskeleti, durum, veri ve erişilebilirlik çalışması açıkça onlara ait olarak işaretlenmiş şekilde mühendise verin. Export başlangıç yapısıdır. Kararlar işin kendisidir.
5. Öğrendiklerinizi sisteme geri besleyin. Make'in tahmin ettiği her yer, token'larınızın veya Code Connect eşlemelerinizin belirsiz olduğu bir yerdir. Bunları sıkılaştırmak bir sonraki export'u daha iyi yapar. Sistem birikerek iyileşir.

Bu desen, insan-işin dışında değil, insan-döngüde modelidir. Make sıkıcı çeviri adımını kaldırır. Düşünmeyi kaldırmaz.

Bu, teslim edilebilirinizi nasıl etkiler

atlassian.design'da canlı görün

Bu sessizce "bitti"nin bir tasarımcı için ne anlama geldiğini değiştiriyor. Yıllarca teslim edilebilir, piksel mükemmel bir frame ve mühendisliğin buna uyması için nazik bir umuttu. Eşleşme her zaman kayıplıydı.

Şimdi frame, sözleşmeye daha yakın. Tasarımınız gerçek token'lara atıfta bulunuyorsa ve bileşenleriniz Code Connect üzerinden eşliyorsa, export niyetinizi daha az sapmayla koda taşır. Teslimat artık bir çeviri olmaktan çıkıp bir aktarım olmaya başlıyor.

Bu, sistem çalışmasının değerini artırır ve güzel ekran görüntülerinin değerini düşürür. Önümüzdeki yılı kazanan tasarımcılar, dosyaları Make'in temiz çıktı üretmesi için yeterince yapılandırılmış olanlardır. Dağınık bir dosya daha hızlı dağınık kod üretir; disiplinli bir sistem ise devralınabilir kod üretir.

Yani gerçek yükseltme yapay zeka değil. Gerçek yükseltme, token'larınızı doğru şekilde adlandırma ve bileşenlerinizi eşleme baskısıdır. Make, bu disiplinin eninde sonunda değil hemen karşılık vermesini sağladı.

SSS

18 Haziran güncellemesi, tasarımcıların Figma Make hakkında en çok sorduğu sorulara verilen gerçek yanıtları değiştiriyor.

Figma Make artık prodüksiyona hazır React yazıyor mu?

Daha yakın, ama kendi başına değil. Güncelleme, gerçek token'larınıza ve Code Connect eşlemelerinize bağlı React üretiyor; bu sağlam ve tutmaya değer. Durum, erişilebilirlik ve gerçek veriyi hâlâ size bırakıyor. Güçlü bir ilk taslak olarak değerlendirin, bitmiş bir özellik olarak değil.

Code Connect nedir ve export için neden önemlidir?

Code Connect, Figma dosyanızdaki bir bileşeni kod tabanınızdaki gerçek olanla eşler. Make'in yeni bir buton icat etmesi ile ekibinizin zaten bakımını yaptığı Button'ı yeniden kullanması arasındaki farktır; böylece export gerçek kaynak kodunuza işaret eder, bir kopya oluşturmak yerine.

Make tasarım token'larımı mı kullanıyor yoksa kendi değerlerini mi icat ediyor?

Token'larınızı kullanıyor; bu 18 Haziran değişikliğinin özü. Eski export'lar markup'a doğrudan ham hex gömmüştü. Güncelleme, değerleri token referanslarına çözümleyerek kodunuzun anlık görüntü dondurmak yerine tema değişikliklerini devralmasını sağlıyor. Çıktıdaki ham hex, o frame'in hiçbir zaman bir token'a eşlenmediği anlamına gelir.

Make hâlâ nerede yetersiz kalıyor?

Beş yer hâlâ bir insan gerektiriyor; yukarıdaki tablonun listelediği yerler:

• Durum mantığı: yükleme, hata, boş, başarı
• Etkileşim ve hareket davranışı
• Bariz olanın ötesinde erişilebilirlik
• Gerçek veri, edge case'ler ve uzun metinler
• Bir bileşeni ne zaman yeniden kullanmak, ne zaman yenisini oluşturmak

Make layout, token'a eşlenmiş stillendirme ve statik iskeletleri ele alıyor. Karar çağrıları gerçek işin yaşadığı yerdir.

Bu hafta iş akışımı değiştirmeli miyim?

Evet, küçük bir şekilde. Make'i tek temiz bir bileşen üzerinde çalıştırın, diff'i bir mühendis gibi inceleyin ve ortaya çıkardıklarını token'larınızı ve Code Connect kapsamınızı sıkılaştırmak için kullanın. Tüm ekibinizi bir gecede yapay zeka teslimatına geçirmeyin.

Sonuç

Figma Make, 18 Haziran'da demo'dan araca geçti. Kanıt, @figma duyuru thread'indeki yaklaşık 9.200 repost değil, mühendislerin altına koyduğu ve silmediği prodüksiyon diff'leridir.

Mekanizma basit. Make, piksel tarif etmeyi ham hex ve tek seferlik markup ile bıraktı ve gerçek token'larınıza ve Code Connect eşlemelerinize atıfta bulunmaya başladı. Bu, çöpe attığınız kod ile merge ettiğiniz kod arasındaki farktır.

Ekibinize gereğinden fazla satmayın. Make iskeleti inşa eder. Durum, etkileşim, erişilebilirlik ve edge case'ler hâlâ sizin işiniz ve her zaman olacak. Bu haftanın en akıllıca hamlesi, güncellemeyi nihayet token'larınızı doğru adlandırıp bileşenlerinizi eşlemek için bir neden olarak kullanmaktır; çünkü temiz bir sistem bu özelliği bir oyuncaktan gerçekten kullanabileceğiniz bir araca dönüştüren şeydir.