Figma’daki ekran temiz ve tutarlı. Geliştirilen sayfa ilk bakışta ona benziyor; fakat butonun yüksekliği değişmiş, kart aralıkları daralmış, hata mesajı başka bir kırmızıyla gösterilmiş. Tek tek küçük görünen kararlar birleştiğinde, ortaya markanın tasarlanan arayüzünden farklı bir ürün çıkıyor.
AI ile tasarımdan koda geçişte dikkatimi çeken sorun bu: Benzer bir ekran üretmekle, markanın tasarım sistemini doğru uygulamak arasında hâlâ önemli bir mesafe var. Figma’nın 2 Eylül’de yayımladığı Coinbase vaka çalışması, bu mesafeyi somut bir örnek üzerinden tartışmaya açıyor.
Haber: Coinbase örneği ne gösteriyor?
Figma’nın aktardığı çalışmada Coinbase ekibi, aynı tasarım, istem ve modelle Code Connect kullanılan ve kullanılmayan akışları karşılaştırmış. Üç denemenin ortalamasında token kullanımı %11,5, uygulama süresi %22,3 ve maliyet %22,5 azalmış. Bileşen seçimi ve tasarım sistemine uyumda da iyileşme bildirilmiş. Token, modelin metni işlerken kullandığı parçaların ölçüsüdür; token sayısı ile maliyet aynı ölçüm değildir. Figma’nın Coinbase vaka çalışması, 2 Eylül 2026.
Bu, belirli bir ekip ve sınırlı bir test için bildirilen sonuç. Her projede aynı tasarrufun elde edileceğini söylemiyor. Vaka Figma tarafından yayımlandığı için bağımsız bir performans araştırması olarak da değerlendirilmemeli.
Code Connect ne işe yarıyor?
Code Connect, Figma’daki tasarım bileşenini kod deposundaki gerçek karşılığıyla ilişkilendiriyor. Böylece AI aracına yalnızca bir butonun nasıl göründüğü değil, projede hangi buton bileşeninin kullanılması gerektiği de aktarılabiliyor. Bu bağlam Figma MCP üzerinden kodlama aracına taşınabiliyor; MCP burada araçlar arasındaki bilgi alışverişinin bağlantısı. Figma geliştirici dokümantasyonu.
15 Eylül kontrolünde Code Connect, Organization ve Enterprise planlarında Dev veya Full koltukla sunuluyor. Bu nedenle küçük bir ekip için ilk karar, mevcut tasarım sisteminin durumu ve ihtiyaç duyulan erişim olmalı. Erişim koşulları.
Yorum: marka kimliği etkileşimde de görünür
Bir dijital markanın kimliği, kullanıcı bir işlem yaparken de hissedilir. Bir formun ne kadar sakin ilerlediği, hatanın nasıl anlatıldığı, butonların ne zaman öne çıktığı ve küçük ekranda hangi bilginin öncelendiği bu deneyimin parçasıdır.
Örneğin güven duygusunu öne çıkaran bir finans uygulaması için aşırı hareketli geçişler ve birbiriyle yarışan çağrı butonları yanlış bir ton yaratabilir. Samimi bir hizmet markasında ise teknik ve mesafeli hata metinleri görsel dilin kurduğu ilişkiyi zayıflatabilir. Kod üretiminde korunması gereken kararların listesi, renk ve font seçiminin ötesine geçer.
Bu nedenle tasarım teslimini ekran dosyalarıyla sınırlamayı doğru bulmuyorum. Ekranın hangi durumda nasıl davranacağı da tarif edilmeli. Bunun temelini tasarım sistemi, token ve bileşen rehberimde ele alıyorum.
Örnek: bir teklif formunu nasıl teslim ederdim?
Bir hizmet şirketinin web sitesinde teklif formu tasarladığımızı düşünelim. Bu örnek, belirli bir müşteri projesinin sonuçlarını temsil etmiyor.
Önce formun amacını netleştirirdim: İlk temasta hangi bilgi gerçekten gerekli? Bütçe alanı zorunlu mu? Telefon numarası verilmeden de talep gönderilebiliyor mu? Bu kararlar, arayüzdeki alan sayısını ve metinleri doğrudan etkiler.
Ardından üç parçalı bir teslim hazırlardım:
- Ekranlar ve durumlar: Boş form, doldurulmuş form, alan hatası, gönderiliyor durumu ve başarı mesajı.
- Bileşen karşılıkları: Kullanılacak input, seçim alanı, buton ve bildirim bileşenleri; destekledikleri seçeneklerle birlikte.
- Davranış kuralları: Klavyeyle ilerleme sırası, hata sonrası odak, uzun Türkçe metinlerin davranışı ve küçük ekrandaki yerleşim.
Bu paket, geliştirmenin sonunda sorulacak “burada ne olması gerekiyordu?” sorularını baştan görünür kılar. AI ile çalışan ekip için de değerlendirilebilir bir hedef oluşturur.
Kalite kontrolünde hangi sorular sorulmalı?
Çalışan sayfayı onaylarken yalnızca masaüstü ekran görüntüsünü yan yana koymazdım. Gerçek bir form doldurma turu yapar, klavyeyle ilerler ve birkaç hata durumunu özellikle oluştururdum.
- Gönderim devam ederken kullanıcı ikinci kez aynı talebi gönderebiliyor mu?
- Hata metni, sorunu ve düzeltme yolunu açıklıyor mu?
- Uzun isimler ve Türkçe karakterler yerleşimi bozuyor mu?
- Küçük ekranda buton ve alanlar rahat kullanılabiliyor mu?
- Sayfanın farklı bölümlerinde aynı bileşen aynı davranışı gösteriyor mu?
Bunlar aracı değil, teslim edilen deneyimi değerlendiren sorular. Tasarım sistemi bağlantıları iyi olsa bile, ürünün bağlamına uygun kontrol yapılması gerekir.
Marka için sonuç
Figma’dan koda geçişte güçlü bir başlangıç, ekibin tasarım kararlarını açık ve sürdürülebilir biçimde tanımlaması. Code Connect bu kararların bir kısmını gerçek kodla ilişkilendirmek için değerlendirilebilir. İlk denemeyi tüm ürün yerine, sık kullanılan bileşenleri içeren tek bir akışta yapmayı öneriyorum.
Bir markanın web deneyimini kurarken görsel kimlik, kullanım kolaylığı ve geliştirme kalitesini birlikte düşünmek gerekiyor. Web tasarım ve yazılım yaklaşımımı inceleyebilir, tasarımının çalışan ürüne nasıl taşınacağını birlikte değerlendirmek için iletişime geçebilirsin.
Kaynaklar
- Figma: Coinbase ve Code Connect vaka çalışması — 2 Eylül 2026
- Figma: Code Connect geliştirici dokümantasyonu ve erişim koşulları
Kaynaklar 15 Eylül 2026 tarihinde kontrol edildi. 2 Eylül, vaka yazısının yayın tarihidir; Code Connect’in lansman tarihi değildir. Ölçümler Figma’nın yayımladığı vakadan, marka ve teslim önerileri kendi değerlendirmemden alınmıştır.