Bir tasarımın tarayıcıda hayat bulma yolculuğu, pek çok kararın üst üste biriktiği karmaşık bir süreçtir. Figma'da mükemmel görünen bir tasarım, geliştirici tarafına geçtiğinde neden çoğu zaman farklı görünür? Cevap, genellikle sürecin yapısında ve kullanılan araçlarda yatar.

Tasarım ve Geliştirme Köprüsü

Tasarım ekibi ile geliştirme ekibi arasındaki iş birliği, bir projenin en kritik boyutlarından biridir. Bu iki disiplin farklı diller konuşur: tasarımcı "hava boşluğu", "tipografi hiyerarşisi", "renk tonu" diye düşünürken; geliştirici "padding", "font-size", "hex değeri" diye çalışır. Bu çeviri sürecindeki kayıplar, tutarsızlıklar ve zaman kaybının temel kaynağıdır.

Modern bir geliştirme sürecinde bu köprünün üç sütunu vardır:

  • Ortak referans noktası: Figma dosyasının tek gerçek kaynak (single source of truth) olarak kullanılması
  • Paylaşılan sistem dili: Tasarım token'ları ve bileşen kütüphanesi
  • Net handoff süreci: Geliştiricinin kod yazmaya başlamadan önce neye ihtiyacı olduğunun tanımlanması

Projenin başında yatırım yapılan bu yapı, geliştirme aşamasında yüzlerce küçük kararı ortadan kaldırır. "Bu butonun border-radius'u kaç?" sorusu, token sistemi varsa hiç sorulmaz.

Müşteri Onay Süreçleri

Geliştirmeye başlamadan önce tasarım onaylarının tamamlanmış olması kritiktir. Geliştirme aşamasında tasarım değişiklikleri, en iyi ihtimalle ekstra iş yükü; en kötü ihtimalle mimari değişiklikler anlamına gelir. Net bir onay akışı; prototip onayı, responsive versiyon onayı ve içerik onayı aşamalarını kapsamalıdır.

Figma Dev Mode

Figma'nın Dev Mode özelliği, tasarımcılardan geliştiricilere geçişi standartlaştırmak için tasarlanmıştır. Dev Mode aktif edildiğinde, geliştiriciler tasarım katmanları üzerine tıklayarak CSS değerlerini, varlık (asset) bilgilerini ve bileşen özelliklerini doğrudan görebilir.

Dev Mode'un sunduğu başlıca özellikler:

  • Otomatik CSS çıkarma: Seçilen elementin rengi, tipografisi, boyutları ve konumlandırması CSS formatında gösterilir. Bu değerler doğrudan kopyalanabilir.
  • Varlık dışa aktarma: SVG, PNG veya WebP formatında icon ve görsel dışa aktarımı tek tıkla yapılır.
  • Bileşen bağlantıları: Figma bileşenleri, kod kütüphanesindeki karşılıklarına (Code Connect ile) bağlanabilir. Geliştirici, Figma'da bir bileşen seçtiğinde doğrudan kullanılabilir kod örneğini görür.
  • Değişiklik izleme: Tasarımda güncellenen elementler işaretlenir; geliştirici neyin değiştiğini kolayca takip edebilir.

Dev Mode, tasarımcının her ölçü için ekstra açıklama yazmasını gereksiz kılar. Ancak bu özelliği etkin kullanmak için Figma dosyasının titizlikle organize edilmesi gerekir: katmanların isimlendirilmesi, Auto Layout kullanımı ve bileşen yapısının düzgün kurulması şarttır.

Dev Mode, bir sözlük gibidir; ancak sözlüğün işlevli olması için kelimelerin doğru tanımlanmış olması gerekir. Düzensiz bir Figma dosyası, Dev Mode'u da işlevsiz kılar.

Token Tabanlı Sistem

Tasarım token'ları, renk, tipografi, boşluk, gölge gibi tasarım kararlarının isimlendirilerek merkezi bir yerde tanımlanmasıdır. Örneğin #0a0a0a rengi doğrudan kodda yazmak yerine color.background.primary token'ı kullanılır. Bu yaklaşımın faydaları somuttur.

Token Sisteminin Avantajları

  • Renk veya boşluk değiştiğinde tek bir yerden güncellemek yeterlidir; tüm bileşenler otomatik güncellenir.
  • Tasarımcı ve geliştirici aynı isimleri kullanır; iletişim hataları azalır.
  • Karanlık mod, yüksek kontrast modu gibi tema değişkenleri token katmanında yönetilir; kod değişikliği gerekmez.
  • Tasarım tutarlılığı otomatik olarak korunur; kimse "hangi mavi tonu?" sorusunu sormak zorunda kalmaz.

Figma'dan Tailwind'e Token Aktarımı

Tailwind CSS kullanan projelerde token'lar, tailwind.config.js dosyasına aktarılır. Figma'daki renk stilleri, theme.colors altında Tailwind class isimlerine dönüştürülür. Boşluk sistemi theme.spacing'e, tipografi ölçeği theme.fontSize'a eklenir. Bu aktarım manuel yapılabileceği gibi Style Dictionary gibi araçlarla otomatize edilebilir.

Atomic Design ve Bileşen Tabanlı Geliştirme

Token sistemi, Atomic Design metodolojisiyle birleşince güçlü bir yapı ortaya çıkar. Atomlar (buton, input, ikon), moleküller (form grubu, kart), organizmalar (header, hero section) ve şablonlar hiyerarşisi; hem Figma'da hem de kod tabanında aynı mantıkla organize edilir. Bu hizalama, ilerleyen aşamalarda yeni bileşenler eklerken sisteme entegrasyon süresini önemli ölçüde kısaltır.

Responsive Breakpoint'lerin Tasarımdan Koda Taşınması

Figma'da tasarımın mobil (375px), tablet (768px) ve masaüstü (1440px) versiyonları ayrı frame'ler halinde hazırlanmalıdır. Her breakpoint için ayrı layout kararları (grid sütun sayısı, tipografi ölçeği, navigasyon yapısı) belgelenir. Geliştirici bu frame'leri referans alarak Tailwind'in responsive prefix'lerini (sm:, md:, lg:) doğru şekilde uygular.

Handoff'ta Yaygın Hatalar

En dikkatli süreçlerde bile handoff aşaması sorunlara açıktır. Deneyimlerimizden derlediğimiz en sık karşılaşılan hatalar ve çözümleri şunlardır:

  • Hover, focus ve disabled durumların eksikliği: Tasarımda yalnızca default durum hazırlanmış, diğer etkileşim durumları geliştirme aşamasına bırakılmıştır. Çözüm: Her bileşen için tüm durumları tasarım aşamasında Figma'da tanımlamak.
  • Edge case eksikliği: Uzun isimler, boş durumlar, hata mesajları tasarımda gösterilmemiştir. Geliştirici bu durumları tahmin etmek zorunda kalır. Çözüm: Gerçekçi içerik ve sınır koşullarıyla tasarım test edilir.
  • Animasyon tanımlarının yokluğu: "Burası animate olsun" denmesi yeterli değildir. Animasyon süresi, easing ve tetikleyici koşulları belirtilmelidir.
  • Çözünürlük bağımsız varlıklar: Bitmap yerine SVG kullanılması gereken yerlerde PNG verilmesi, geliştiricinin elinde bozuk görüntüler bırakır. Tüm ikonlar ve grafikler SVG formatında sağlanmalıdır.
  • Geliştirme sırasında tasarım değişikliği: Handoff sonrasında tasarımda yapılan değişiklikler, geliştiriciye bildirilmeden Figma'da güncellenirse senkronizasyon bozulur. Değişiklik log'u tutmak bu problemi önler.

Proje zaman çizelgesi planlanırken handoff aşamasına yeterli süre ayrılması kritiktir. Tasarım onayından ilk geliştirmeye başlamaya kadar geçen süre, token sisteminin kurulması, varlıkların hazırlanması ve tasarım gözden geçirmesi için kullanılır. Bu hazırlık süresi ilerleyen aşamalarda kat kat geri kazanılır.

Figma'dan koda geçiş sürecini hızlı, verimli ve tasarıma sadık bir şekilde yönetmek, ajansımızın temel uzmanlıklarından biridir. Projenizin tasarım ve geliştirme sürecini birlikte planlamak için bizimle iletişime geçin.