Figma'dan Koda: Tasarım Onaylandıktan Sonra Gerçekte Ne Olur?

Tasarımcının sonunda şunu söylediği o anı bilirsiniz:

“Figma hazır.”

Müşteri de şöyle der:

“Onaylandı!”

Herkes mutludur

Ta ki geliştirici ekrana bakıp şunu söyleyene kadar:

“Tamam… şimdi bunu koda dökmemiz lazım.”

İşte asıl iş o anda başlar.

Çünkü bir Figma tasarımını çalışan bir web sitesine dönüştürmek, gördüğünüzü kopyalamak kadar basit değildir.

Aslında güzel bir Figma ekranı ile yayındaki bir web sitesi arasında pek çok şey olur.

Peki perde arkasında neler oluyor?

Karmaşık teknik jargona boğulmadan adım adım inceleyelim.

Önce, Figma'dan Koda Geçiş Nedir?

Şöyle düşünün.

Figma, mimari projedir.

Kod ise binanın kendisidir.

Figma size şunu söyler:

“Web sitesi böyle görünmeli.”

Kodun ise şunu çözmesi gerekir:

“Bunu gerçekten nasıl çalıştıracağız?”

Örneğin Figma'da çok şık bir giriş sayfası görebilirsiniz.

Gördükleriniz şunlardır:

1. E-posta kutusu
2. Şifre kutusu
3. Giriş butonu
4. Şifremi unuttum
5. Google ile giriş

Basit görünüyor, değil mi?

Ama geliştiricinin yine de şunlardan emin olması gerekir:

Buton gerçekten çalışıyor.

Form hataları yakalıyor.

Şifre güvenli bir şekilde işleniyor.

Kullanıcı gerçekten oturum açıyor.

Web sitesi gibi görünmek ile web sitesi olmak arasındaki fark budur.

Peki Figma Onaylandıktan Sonra Ne Olur?

Yolculuk şöyle ilerler:

Figma → Planlama → Kod → Test → Yayındaki Web Sitesi

Ama bu okların içinde pek çok şey yaşanır.

Adım adım ilerleyelim.

1. Adım: Henüz Kod Yazmayın. Tasarımı Anlayın.

Birçok projenin yoldan çıktığı yer burasıdır.

Geliştirici Figma dosyasını alır ve hemen kod yazmaya başlar.

Ama durun.

Kod yazmadan önce neye baktığınızı anlamanız gerekir.

Şunları kontrol etmelisiniz:

1. Sayfa nasıl yapılandırılmış?
2. Hangi öğeler tekrar ediyor?
3. Hangi yazı tipleri kullanılıyor?
4. Renkler neler?
5. Ne kadar boşluk bırakılmış?
6. Mobilde ne oluyor?
7. Hangi öğeler etkileşimli?

Çünkü bazen Figma'da 10 farklı şey gibi görünen öğeler aslında tek bir yeniden kullanılabilir bileşen olabilir.

Bunu erkenden fark etmek ileride saatler kazandırabilir.

2. Adım: Yeniden Kullanılabilir Parçaları Bulun

Bir web sitesi geliştirdiğinizi düşünün.

Aynı butonun şu sayfalarda yer aldığını fark ediyorsunuz:

Ana sayfa → 6 kez

Fiyatlandırma sayfası → 4 kez

İletişim sayfası → 2 kez

Bu butonu 12 kez mi kodlayacaksınız?

Umarız hayır.

Bunun yerine tek bir yeniden kullanılabilir buton bileşeni oluşturursunuz.

Sonra müşteri şunu söylerse:

“Butonu biraz büyütebilir miyiz?”

Bir kez değiştirirsiniz.

Ve her yerde güncellenir.

Bu yüzden geliştiriciler yalnızca tasarıma bakmaz.

Tasarımın arkasındaki sistemi ararlar.

3. Adım: Tasarım Sistemini Çözün

Şimdi ayrıntılara geçiyoruz.

Hangi yazı tipi kullanılıyor?

Marka rengi ne?

Butonların köşeleri ne kadar yuvarlak?

Bölümler arasında ne kadar boşluk var?

Bir başlık nasıl görünüyor?

Bir kart nasıl görünüyor?

Bunlar web sitesinin tasarım sisteminin bir parçası hâline gelir.

Bunu web sitesinin kural kitabı olarak düşünebilirsiniz.

Geliştiriciler rastgele şöyle seçimler yapmak yerine:

“Burada 18px mi olsa?”

izleyebilecekleri tutarlı bir sisteme sahip olur.

Bir web sitesi 5 sayfadan 50 sayfaya büyüdüğünde tutarlılık son derece önemli hâle gelir.

4. Adım: Peki Figma'daki Onca Görsel Ne Olacak?

İşte ilginç bir nokta.

Figma'da gördüğünüz her şey görsel olarak dışa aktarılmamalıdır.

Yeni başlayan biri şöyle düşünebilir:

“Bu bir butona benziyor. Dışa aktarayım.”

Ama iyi bir geliştirme süreci böyle işlemez.

Buton, gerçek bir buton olarak geliştirilmelidir.

Metin, metin olarak kalmalıdır.

Kartlar kodla oluşturulmalıdır.

Gerçekten görsel olması gereken fotoğraflar ve illüstrasyonlar ise ayrıca dışa aktarılabilir.

Neden?

Çünkü gerçek web sitesi öğeleri:

Duyarlıdır.

Tıklanabilirdir.

Erişilebilirdir.

Düzenlenebilirdir.

Ve bakımı çok daha kolaydır.

5. Adım: Şimdi Teknolojiyi Seçin

Geliştiricinin şu soruyu sorduğu yer burasıdır:

“Ne geliştiriyoruz?”

Basit bir kurumsal web sitesi mi?

Belki HTML, CSS ve JavaScript yeterlidir.

Modern bir web uygulaması mı?

React veya Next.js daha mantıklı olabilir.

Bir mobil uygulama mı?

Belki Flutter veya React Native.

Büyük bir SaaS ürünü mü?

O zaman çok daha fazlasını düşünmeniz gerekir:

1. Frontend
2. Backend
3. Veritabanı
4. API'ler
5. Kimlik doğrulama
6. Güvenlik
7. Ölçeklenebilirlik

Yani her şeye Figma tasarımı karar vermez.

Ürün gereksinimleri karar verir.

6. Adım: Tasarımı Bileşenlere Dönüştürün

Artık işler ilginçleşmeye başlıyor.

Geliştirici şöyle düşünmek yerine:

“Bu sayfayı oluşturmam gerekiyor.”

şöyle düşünmeye başlar:

“Bu sayfa nelerden oluşuyor?”

Belki de:

Bunların her biri yeniden kullanılabilir yapı taşlarına dönüşebilir.

Biraz LEGO'ya benzer.

Her seferinde her LEGO parçasını sıfırdan üretmezsiniz.

Daha büyük bir şey inşa etmek için mevcut parçaları kullanırsınız.

Bileşen tabanlı geliştirme de özünde bunu yapar.

7. Adım: Önce Yapıyı Kurun

Sonunda kod yazmaya başlıyoruz.

Ancak burada bile geliştiriciler genellikle işe her küçük ayrıntıya takılarak başlamaz.

Önce:

Yapıyı kurun.

Sonra:

Stilleri ekleyin.

Sonra:

Etkileşimleri ekleyin.

Sonra:

Her şeyi test edin.

Bir ev inşa ettiğinizi düşünün.

Duvarları örmeden önce perde rengini seçerek başlamazsınız.

Burada da mantık aynı.

Önce yapı. Ayrıntılar sonra.

8. Adım: Figma'daki Gibi Görünmesini Sağlayın

Şimdi tasarımla eşleştirmeye başlıyoruz.

Yazı boyutları.

Renkler.

Boşluklar.

Butonlar.

Kartlar.

Görseller.

Kenarlıklar.

Gölgeler.

Her şey bir araya gelmeye başlar.

Ancak önemli bir kural var:

Pikselleri yalnızca kopyalamayın. Onları anlayın.

Neden?

Çünkü Figma 1440px'lik bir masaüstü ekranı gösteriyor olabilir.

Kullanıcınız ise şunlardan birini kullanıyor olabilir:

1366px dizüstü bilgisayar

1024px tablet

390px telefon

Web sitesinin hepsinde çalışması gerekir.

9. Adım: Ve Sıra Mobile Gelir…

İşlerin ilginçleştiği yer burasıdır.

Güzel masaüstü tasarımınızda:

Bir satırda 3 kart var.

Peki telefonda ne olacak?

Muhtemelen şuna ihtiyacınız olacak:

Satır başına 1 kart.

Masaüstü menünüz şöyle:

Ana Sayfa | Hakkımızda | Hizmetler | İletişim

Mobilde?

Belki bir hamburger menü olur.

Devasa hero görseliniz?

Yeniden boyutlandırılması ya da konumunun değiştirilmesi gerekebilir.

Buna duyarlı (responsive) tasarım denir.

Figma'dan koda geçişin neden basit bir “kopyala-yapıştır” olmadığının en büyük nedenlerinden biri de budur.

Geliştiricinin şuna karar vermesi gerekir:

“Ekran değiştiğinde bu tasarım nasıl davranmalı?”

10. Adım: Her Şeyin Gerçekten Çalışmasını Sağlayın

Artık web sitesi gerçek bir ürüne dönüşmeye başlar.

Figma'daki bir butonda şu yazabilir:

Giriş Yap

Kodun ise birinin gerçekten oturum açmasını sağlaması gerekir.

Arama çubuğu gerçekten arama yapmalıdır.

Form gerçekten gönderilmelidir.

Açılır menü gerçekten açılmalıdır.

Ödeme butonu gerçekten bir ödeme sistemine bağlanmalıdır.

Bir pano gerçekten veri göstermelidir.

UI tasarımı ile yazılım geliştirme arasındaki fark burada netleşir.

Figma deneyimi gösterir.

Kod ise deneyimi yaratır.

11. Adım: Backend'i Bağlayın

Basit bir örnek ele alalım.

Bir online yemek siparişi uygulaması düşünün.

Figma şunu gösterir:

Restoran → Yemek → Sepet → Ödeme Adımı → Ödeme

Basit görünüyor.

Peki bu ekranların arkasında?

Pek çok şey oluyor.

Uygulamanın şunları bilmesi gerekir:

1. Kullanıcı kim?
2. Ne sipariş etti?
3. Sepetinde ne var?
4. Toplam tutar ne?
5. Sipariş nereye gitmeli?
6. Ödeme başarılı oldu mu?
7. Siparişin durumu ne?

İşte burada API'ler, veritabanları ve backend sistemleri devreye girer.

Kullanıcı arayüzü görür.

Arkasındaki teknoloji ise her şeyin gerçekleşmesini sağlar.

12. Adım: Figma ve Gerçeklik

Şimdi herkesin en sevdiği kısma geldik.

Figma tasarımını açın.

Web sitesini açın.

İkisini yan yana koyun.

Ve birden…

“Bir dakika. Bu neden farklı görünüyor?”

Belki de:

Figma'daki başlık → 48px

Web sitesindeki başlık → 42px

Figma'daki boşluk → 24px

Web sitesindeki boşluk → 16px

Belki buton biraz fazla büyük.

Belki görselin konumu farklı.

Belki mobil düzen kalabalık hissettiriyor.

Bu küçük ayrıntılar önemlidir.

Bu yüzden geliştiriciler nihai ürünü orijinal tasarımla karşılaştırır ve düzeltmeler yapar.

Buna tasarım QA'i (kalite kontrolü) denir.

13. Adım: Gerçek Cihazlarda Test Edin

Bir web sitesi dizüstü bilgisayarınızda kusursuz görünüp başka birinin telefonunda tamamen bozulabilir.

O yüzden test edin.

Şunları kontrol edin:

Mobil

Tablet

Dizüstü bilgisayar

Masaüstü

Farklı tarayıcıları da unutmayın.

Şunlara dikkat edin:

1. Bozuk düzenler
2. Taşan metinler
3. Çok küçülen butonlar
4. Tuhaf görünen görseller
5. Açılmayan menüler
6. Çalışmayan formlar

Çünkü:

“Benim bilgisayarımda çalışıyor” bir test stratejisi değildir.

14. Adım: Hızlı Hâle Getirin

Tamam, web sitesi iyi görünüyor.

Çalışıyor.

Ama hızlı mı?

Yüklenmesi bir ömür süren güzel bir web sitesi pek de harika bir deneyim sayılmaz.

Bu yüzden geliştiriciler şu gibi unsurları optimize eder:

1. Görseller
2. Yazı tipleri
3. Kod
4. Komut dosyaları (script)
5. Bileşenler
6. Yükleme davranışı

Amaç basit:

Web sitesinin hızlı hissettirmesini sağlamak.

Çünkü kullanıcılar Figma dosyanızın ne kadar güzel olduğunu umursamaz.

Web sitesinin kendileri için ne kadar hızlı çalıştığını umursarlar.

15. Adım: Erişilebilirliği Unutmayın

Kolayca gözden kaçabilecek bir başka konu daha var.

Bir web sitesi mümkün olduğunca çok kişi tarafından kullanılabilmelidir.

Bu da şunları düşünmek demektir:

1. Renk kontrastı
2. Klavyeyle gezinme
3. Okunabilir metin
4. Erişilebilir formlar
5. Görsel açıklamaları
6. Odak durumları

Bir tasarım kusursuz görünüp yine de bazı kullanıcılar için gezinmesi zor olabilir.

İyi bir geliştirme süreci yalnızca her şeyin iyi görünmesini sağlamak değildir.

Her şeyin herkes için iyi çalışmasını sağlamaktır.

Peki Yapay Zekâ?

Şimdi ilginç kısma geldik.

Yapay zekâ, geliştiricilerin tasarımları çok daha hızlı bir şekilde koda dönüştürmesine yardımcı olabilir.

Şunları üretebilir:

1. HTML
2. CSS
3. React bileşenleri
4. Tailwind kodu
5. UI yapıları

Kulağa harika geliyor.

Gerçekten de öyle.

Ama bir püf noktası var.

Üretilen kod kendiliğinden iyi kod değildir.

Birinin yine de şunları kontrol etmesi gerekir:

Mobilde çalışıyor mu?

Erişilebilir mi?

Güvenli mi?

Kodun bakımı kolay mı?

Ürün büyüdüğünde de çalışmaya devam edecek mi?

Yapay zekâ geliştirmeyi hızlandırabilir.

Ancak iyi mühendislik hâlâ insan düşüncesine ihtiyaç duyar.

Figma'dan Koda Geçişteki En Büyük Hata

Şöyle düşünmek:

Figma → Kopyala → Yapıştır → Bitti

Profesyonel geliştirme böyle işlemez.

Gerçek süreç daha çok şuna benzer:

Figma

↓

Anla

↓

Planla

↓

Bileşenleri Oluştur

↓

Kodu Yaz

↓

Duyarlı Hâle Getir

↓

Backend'i Bağla

↓

Test Et

↓

Tasarımla Karşılaştır

↓

Optimize Et

↓

Yayına Al

Ve birdenbire o basit “Figma'dan web sitesine” talebi artık o kadar da basit görünmez.

Tasarımcılar Geliştiricilerin İşini Nasıl Kolaylaştırabilir?

Tasarımcıların geliştirici olmasına gerek yok.

Ancak birkaç şey teslim sürecini çok daha sorunsuz hâle getirebilir.

Şunları kullanın:

1. Auto Layout
2. Bileşenler
3. Tutarlı boşluklar
4. Doğru katman adları
5. Net tipografi
6. Duyarlı tasarımlar
7. Düzenli varlıklar (asset)

Ve en önemlisi:

Açık olmayanı açıklayın.

Biri üzerine geldiğinde bir buton değişiyorsa, bunu gösterin.

Bir menü mobilde farklı davranıyorsa, belirtin.

Bir kart tıklandığında genişliyorsa, belgeleyin.

İyi iletişim, saatlerce gereksiz revizyonun önüne geçebilir.

Geliştiriciler Süreci Nasıl Daha İyi Hâle Getirebilir?

Geliştiricilere de görev düşüyor.

Yalnızca şunu sormayın:

“CSS nerede?”

Şunu sorun:

“Bu bileşen neden bu şekilde tasarlandı?”

Ürünü anlayın.

Yeniden kullanılabilir kalıpları arayın.

Mobili erkenden düşünün.

Tasarımcıyla konuşun.

Orijinal Figma tasarımıyla karşılaştırarak test edin.

Ve bir şeyin çalışmadığını fark etmek için sona kadar beklemeyin.

Figma'dan Koda Geçişin Asıl Amacı

Figma'dan koda geçiş aslında bir tasarımı dönüştürmekle ilgili değildir.

Bir fikri alıp insanların gerçekten kullanabileceği bir şeye dönüştürmekle ilgilidir.

Figma dosyası, fikrin görselleştiği yerdir.

Kod ise fikrin işlevsel hâle geldiği yerdir.

Bu iki nokta arasındaki her şey de bir tasarımı gerçek bir dijital ürüne dönüştürür.

Yani bir dahaki sefere biri şunu söylediğinde:

“Şu Figma'yı web sitesine çeviriverin yeter.”

Bu sözlerin arkasında çok daha fazlasının olduğunu artık biliyorsunuz.

Çünkü harika dijital ürünler yalnızca tasarlanmaz.

Özenle inşa edilir.