LC Waikiki Figma Workshop: Ekran Kurgusundan Prototipe

Kurumsal Figma eğitimleri genelde tasarımcılar için kurulur ve ilk soru şudur: "Bu araç neler yapabiliyor?" LC Waikiki CMI araştırma ekibi için hazırladığımız workshop başka bir soruyla açıldı: "Test edeceğiniz ekranı tasarım ekibini beklemeden kendiniz kurabilir misiniz?"

21 ve 22 Eylül 2026'da, iki yarım gün süren uygulamalı bir Figma workshop'u yürüttük. Masada beş kişilik bir araştırma ekibi vardı ve çoğu Figma'yı ilk kez açıyordu. Çalışma dosyasını eğitmenimiz Ramazan Güler, LC Waikiki'nin kendi mobil ekranlarından hazırladı. İkinci günün sonunda ekip, sitedeki ürün sayfası header'ını ve yaş/beden seçicisini auto layout ve component mantığıyla yeniden kurmuş, prototiplemeye geçmişti.

Neden böyle bir programa ihtiyaç duyuldu?

Talep bir katalog başlığı olarak gelmedi. İlk görüşmede ekip ne yapmak istediğini net anlattı: bir akışı kullanıcıyla test etmeden önce, o akışın ekranlarını kendi eliyle çizmek ve birbirine bağlı üç ekranlık bir prototip olarak teste çıkarmak.

Ortaya çıkan tablo netti. Ekip araştırmanın her adımını biliyor; kullanıcıyla konuşmak, görev yazmak, bulguyu raporlamak zaten onların işi. Eksik olan yöntem bilgisi değildi. Asıl mesele, test edilecek ekranın başka bir ekibin masasından geçmesiydi. Bir akışın tasarım diline uyup uymadığını ve araştırmaya hazır olup olmadığını görmek için o sırayı beklemek gerekiyordu.

Görüşmelerde öne çıkan ihtiyaçlar workshop'un kapsamını belirledi:

Sıfırdan başlayan bir ekip. Katılımcıların çoğu Figma'ya ilk kez giriyordu, biri temel düzeyde kullanıyordu. İçerik en baştan, arayüzün kendisinden açılmalıydı.

Araç odaklı kapsam. Kullanılabilirlik testi ve araştırma yöntemleri bu ekibin zaten uzmanlık alanı. Onları kapsamın dışında tuttuk, sürenin tamamını Figma'da üretmeye ayırdık.

Bozulmayan ekran. Test sırasında metin uzuyor, ürün adı değişiyor, farklı telefonlarda açılıyor. Ekip bu değişimlerde dağılmayan ekranlar istiyordu.

Tekrar eden öğeleri tek yerden yönetmek. Aynı beden seçici, aynı ikon, aynı buton onlarca ekranda geçiyor. Her birini elle düzeltmek araştırma temposuna yetişmiyor.

AI ile hız. Ekip Figma'nın AI özelliklerinin programda yer almasını özellikle istedi: görsel düzenleme, ekran taslağı çıkarma, hazır bir sayfayı düzenli yapıya çevirme.

En sık tekrar eden beklenti basitti: workshop bittiğinde ertesi gün kendi ekranını açıp çalışabilmek.

Workshop'un tasarım yaklaşımı

Sekiz saatlik bir kurumsal Figma eğitimini beş kişiye, üstelik sıfırdan başlayan bir gruba uyarlarken birkaç ilkeye yaslandık.

Kapsam hıza göre daraldı. İlk gün grubun temposunu gördük ve ekiple birlikte karar verdik: yetiştirmeye çalışmıyoruz, anlaşılmadan bir sonraki konuya geçmiyoruz. Conditional logic ve ileri seviye prototipleme bu yüzden programdan çıktı.

Kendi markalarının ekranları. Örnek bir e-ticaret şablonu yerine LC Waikiki'nin kayıt, giriş, ana ekran, kategori, ürün ve favoriler ekranlarını katmanlarına ayırıp component'lere dönüştürdük. Katılımcılar her gün gördükleri ekranlarla çalıştı.

Herkes kendi kopyasında. Dosyayı düzenleme yetkisiyle paylaşmadık. Her katılımcı kendi hesabına bir kopya aldı, böylece ortak dosya bozulmadı ve herkes rahatça denedi.

Gösterip bırakmak yok. Her başlık kısa bir gösterimle açıldı, hemen ardından katılımcı aynı adımı kendi ekranında yaptı. Takılan kişi ekranını paylaştı, adımı birlikte tamamladık.

Geliştiricinin mantığıyla tasarlamak. Auto layout'u anlatırken CSS Flexbox'tan geldiğini gösterdik. Araştırmacının kurduğu ekran, yazılım ekibinin okuyabileceği bir yapıda olmalıydı.

Dört katmanlı bir atölye kurgusu

İki oturumun arkasında birbirini besleyen dört katman vardı.

1. Çalışma dosyası. Ramazan Güler, workshop'tan önce LC Waikiki'nin mobil ekranlarını katmanlarına ayırıp bileşenlere dönüştürdü. Dosyada kısayol listesi ve eklenti kaynakları da hazır duruyordu.

2. Kişisel kopya. Her katılımcı dosyayı kendi alanına aktardı. Hata yapmak serbestti, çünkü kimsenin hatası başkasının ekranını etkilemiyordu.

3. Canlı uygulama. Anlatım ile uygulama arasında boşluk bırakmadık. Katılımcılar ekran paylaşarak adımları eğitmenle birlikte yürüttü.

4. Gerçek site öğeleri. Uygulamaların malzemesi LC Waikiki'nin sitesinden geldi: "KADIN ÇANTA" başlıklı header, sepet ikonu ve ürün detayındaki yaş/beden seçici.

İki yarım gün, yedi başlık

Program iki oturuma yayıldı. İlk gün Figma'nın yapı taşlarını, ikinci gün ekranı ayakta tutan yapıyı çalıştık.

1. gün · Arayüz ve dosya düzeni: Pages ve Layers, frame ile grup farkı, section'lar ve "Ready for Dev" işaretiyle geliştirme ekibine teslim, temel kısayollar.

1. gün · Görselle çalışmak: Vektör ve bitmap farkı, logo ve ikonun SVG olarak alınması, hangi durumda PNG, JPEG ya da PDF dışa aktarılacağı.

1. gün · AI ile görsel düzenleme: Remove Background, Expand, Boost Resolution ve Vectorize. Türkçe prompt ile görsel üzerinde değişiklik yaptık, hangi görselde işe yaradığını ve hangisinde yaramadığını birlikte gördük.

1. gün · Web'den Figma'ya: Figma'nın Chrome eklentisiyle siteden bir alanı seçip dosyaya almak, Figma Agent ile bir ekran görüntüsünü auto layout yapısına çevirmek.

2. gün · Auto layout: Hug, Fixed ve Fill davranışları, padding kuralları ve boşlukta sabit değer yerine Auto kullanmak. Header'ı 393, 402 ve 440 piksel genişliklerde test ettik.

2. gün · İkon düzeni: Iconify ve benzeri kaynaklar, 24x24 çerçeve kuralı, Flatten ve Outline Stroke ile renk ve kalınlık sorunlarının önüne geçmek.

2. gün · Component ve variant: Master ve instance ilişkisi, Default ve Hover durumlarından oluşan bir component set, component properties ile her instance'ta farklı yaş ve beden değeri göstermek.

İkinci günün son bölümünü doğrudan prototiplemeye ayırdık. Planlanan ara uygulamayı bu yüzden kısalttık; ekibin önceliği ekranları birbirine bağlamaktı.

Kazandırılan yetkinlikler

• Figma arayüzünde frame, grup ve section ayrımıyla düzenli bir çalışma dosyası kurmak
• Geliştirme ekibine teslim durumunu Ready for Dev ile işaretlemek
• Görsel ihtiyacına göre vektör ya da bitmap seçmek ve doğru formatta dışa aktarmak
• Figma'nın AI görsel araçlarını nerede işe yaradığını bilerek kullanmak
• Web'deki bir alanı Chrome eklentisiyle Figma'ya almak
• Auto layout ile içerik değiştiğinde dağılmayan ekran öğeleri kurmak
• Hug, Fixed ve Fill davranışlarından doğrusunu seçmek
• Farklı telefon genişliklerinde responsive davranışı test etmek
• İkonları 24x24 çerçeve kuralıyla tutarlı kullanmak
• Component, variant ve component properties ile tekrar eden öğeleri tek noktadan yönetmek

Çıktı: kendi sitelerinden kurulmuş bir ekran iskeleti

Workshop'un en somut çıktısı katılımcıların kendi dosyalarında duruyor. LC Waikiki'nin sitesinden aldıkları iki öğeyi Figma'da, bir geliştiricinin okuyabileceği yapıda yeniden kurdular.

Header. Geri oku, başlık, arama ve sepet ikonları tek bir auto layout çerçevesinde toplandı. Aradaki boşluk sabit bir piksel değeri yerine Auto'ya bırakıldı, böylece header en dar ve en geniş telefonda aynı düzende kaldı. Sepetteki adet rozeti Ignore Auto Layout ile konumlandı. Bu özelliği yalnızca zorunlu olduğunda kullanmayı konuştuk, çünkü yazılım tarafına ek yük getiriyor.

Yaş/beden seçici. Ürün detay sayfasındaki seçiciyi Default ve Hover durumlarıyla bir component set olarak kurduk. Yaş ve beden metinleri component property'ye bağlandı; aynı component'ten altı sekiz instance kullanılırken her biri farklı bir değer gösterebiliyor.

Bu iki öğe, ekibin sonraki test ekranlarında yeniden kullanacağı iskeletin ilk parçaları.

Bu programı ayıran ne?

Tasarımcı olmayan bir ekip için kurgulandı. Araştırmacıların Figma'dan ne istediğini görüşmede netleştirdik ve içeriği buna göre budadık.

Çalışma malzemesi kurumun kendi ekranlarıydı. Katılımcılar ilk dakikadan itibaren tanıdıkları bir ürün üzerinde çalıştı.

Tempo gruba göre ayarlandı. Müfredatı yetiştirmek yerine anlaşılmasını önceledik ve ileri başlıkları bilinçli olarak dışarıda bıraktık.

AI ayrı bir oturum olarak kalmadı. Görsel düzenlemeden bir sayfayı auto layout'a çevirmeye kadar, AI özelliklerini ilgili konunun içinde gösterdik.

Kurumunuza Özel Bir Program Tasarlayalım

Araştırma, ürün ya da pazarlama ekibiniz tasarım aracını kendi işine göre kullanmak istiyorsa, programı ekibinizin seviyesine ve kendi ekranlarınıza göre birlikte kuralım.

Kataloğumuzu inceleyin → [Katalog İndir]

İletişim → egitim@brick.institute