Sıfırdan Figma ile Prototipleme Kursu

Ders 1 • Figma Ekosistemi ve Hesap Kurulumu

Figma'nın web ve masaüstü uygulamalarını, plan türlerini ve hesap yapılandırmasını kapsar. Herhangi bir tasarım çalışmasına başlamadan önce teknik temeli oluşturur.

Ders 2 • Temel Klavye Kısayolları ve Ayarlar

Verimli iş akışı için en etkili kısayolları ve tercih ayarlarını kapsar. Burada kazanılan hız ve doğruluk, sonraki her bölümde artarak devam eder.

Ders 3 • Dosyalar, Sayfalar ve Proje Organizasyonu

Projeler içinde dosya ve sayfaları nasıl oluşturacağını, kopyalayacağını ve düzenleyeceğini öğretir. Doğru yapı, daha sonraki çok ekranlı prototip çalışmalarında karışıklığı önler.

Ders 1 • Temel Şekilleri Çizme ve Düzenleme

Dikdörtgen, elips, çokgen ve yıldız araçlarını özellikleriyle birlikte kapsar. Bu temel şekiller, daha sonra oluşturulan her UI öğesinin yapı taşlarını oluşturur.

Ders 2 • Vektör Kalem Aracı ve Yol Düzenleme

Özel vektör yolları ve çapa noktası manipülasyonu için kalem aracını tanıtır. Burada oluşturulan özel simgeler ve illüstrasyonlar daha sonraki prototip ekranlarında görünür.

Ders 3 • Hizalama, Dağıtım ve Boşluk

Hizalama araçlarını, akıllı dağıtımı ve düzenli boşluk kontrollerini kapsar. Bir sonraki bölümde otomatik düzeni tanıtmadan önce hassas boşluk ayarı gereklidir.

Ders 4 • Çerçeveler ve Grupları Anlama

Çerçeveler ve gruplar arasındaki yapısal farkı ve her birinin ne zaman kullanılacağını açıklar. Çerçeveler, ekranların, bileşenlerin ve otomatik düzenin temelidir.

Ders 1 • Dolgular, Gradyanlar ve Görseller

Düz dolguları, doğrusal ve dairesel gradyanları ve görsel dolgu modlarını kapsar. Bu teknikler, proje boyunca profesyonel arka planlar ve UI yüzeyleri üretir.

Ders 2 • Bir Yazı Tipi Ölçeği Oluşturma

Başlıklar, gövde metni ve alt yazılar için modüler bir yazı tipi ölçeğinin nasıl tanımlanacağını öğretir. Tanımlanmış bir ölçek, prototipteki her ekranda görsel hiyerarşiyi sağlar.

Ders 3 • Metin Stilleri ve Stil Yönetimi

Dosya genelinde paylaşılan metin stilleri oluşturmayı, adlandırmayı ve uygulamayı kapsar. Stil yönetimi, bileşenler tanıtılmadan önce tutarsızlığı azaltır.

Ders 4 • Yerel Bir Renk Sistemi Oluşturma

Birincil, ikincil, nötr ve anlamsal renk jetonlarının yerel stiller olarak nasıl tanımlanacağını öğretir. Merkezileştirilmiş renkler, tüm çerçevelerde global güncellemeleri anında yapmayı sağlar.

Ders 1 • Kısıtlamalar ve Duyarlı Çerçeveler

Bir çerçeve yeniden boyutlandırıldığında katmanların nasıl davranacağını kontrol eden kısıtlama ayarlarını kapsar. Kısıtlamalar otomatik düzenle birleştiğinde gerçekten duyarlı ekran tasarımları üretir.

Ders 2 • Otomatik Düzen Çerçevelerini İç İçe Yerleştirme

Karmaşık, uyarlanabilir UI yapıları oluşturmak için otomatik düzen çerçevelerinin nasıl iç içe yerleştirileceğini öğretir. İç içe düzenler, kart ızgaralarının, navigasyon çubuklarının ve form düzenlerinin bel kemiğidir.

Ders 3 • Otomatik Düzene Giriş

Otomatik düzenin temel kavramı olan yön, boşluk ve dolguyu açıklar. Bu modeli anlamak, herhangi bir duyarlı bileşen oluşturmadan önce gereklidir.

Ders 4 • Duyarlı UI Kalıpları Oluşturma

Bir navigasyon çubuğu, kart ızgarası ve form oluşturmak için otomatik düzen ve kısıtlamaları uygular. Bu kalıplar, sonraki bölümlerdeki prototip ekranlarında doğrudan yeniden kullanılır.

Ders 1 • Temel Bir UI Bileşen Kütüphanesi Oluşturma

Düğmeler, girişler, simgeler ve kartlar oluşturmak için bileşenleri ve varyantları uygular. Bu kütüphane, prototip oluşturma bölümünde oluşturulan tüm ekranlar için doğrudan kaynaktır.

Ders 2 • Bileşen Özellikleri

Bileşenlerde boolean, metin, örnek değiştirme ve iç içe örnek özelliklerini kapsar. Özellikler, bileşen yapısını bozmadan kontrollü özelleştirme sunar.

Ders 3 • Bileşen Varyantları

İlgili bileşen durumlarının, adlandırılmış özelliklere sahip bir varyant setinde nasıl gruplandırılacağını öğretir. Varyantlar, bileşenleri çoğaltmadan prototiplerde etkileşimli durum değişikliklerini güçlendirir.

Ders 4 • Bileşen Oluşturma ve Kullanma

Çerçeveleri ana bileşenlere dönüştürmeyi ve dosya genelinde örnekler yerleştirmeyi kapsar. Bileşenler, tek bir düzenlemenin anında her ekrana yayılmasını sağlar.

Ders 1 • Prototip Bağlantıları ve Etkileşimler

Çerçeveler arasına prototip bağlantıları, tetikleyicileri ve hedefleri nasıl ekleyeceğini öğretir. Bağlantılar, statik ekranları tıklanabilir, gezilebilir bir prototipe dönüştürür.

Ders 2 • Temel Uygulama Ekranlarını Tasarlama

Kullanıcı karşılama, kontrol paneli ve detay ekranları oluşturmak için bileşen kütüphanesini uygular. Her ekran, önceki bölümlerde oluşturulan otomatik düzeni ve paylaşılan stilleri kullanır.

Ders 3 • Ekranları ve Kullanıcı Akışlarını Planlama

Tasarlamadan önce kullanıcı akışı haritalamasını, ekran envanterini ve adlandırma kurallarını kapsar. Planlama, sonraki bölümlerde ekranları birbirine bağlarken yapısal yeniden çalışmayı önler.

Ders 4 • Geçişler ve Animasyon Ayarları

Anlık, yok olma, kaydırma, itme ve akıllı animasyon geçişlerini kapsar. Uygun geçişler, navigasyon yönünü ve arayüz davranışını net bir şekilde iletir.

Ders 1 • Etkileşimli Bileşenler ve Durum Değişiklikleri

Durum değişikliklerini simüle etmek için bileşen varyantlarını prototip bağlantılarıyla kullanmayı kapsar. Etkileşimli bileşenler, karmaşık akışlar için gereken çerçeve sayısını azaltır.

Ders 2 • Kaydırma, Taşma ve Sabit Öğeler

Dikey ve yatay kaydırma, taşma kırpma ve yapışkan sabit katmanları öğretir. Bu ayarlar, mobil ve web prototiplerinde yerel kaydırma davranışını kopyalar.

Ders 3 • Koşullu Mantık ve Eylemler

Prototip etkileşimlerinde if-else koşullarını ve çok adımlı eylem dizilerini öğretir. Koşullu mantık, gerçek uygulama karar noktalarını yansıtan dallanmış akışları mümkün kılar.

Ders 4 • Figma Değişkenlerine Giriş

Sayı, metin, boolean ve renk değişken koleksiyonları oluşturmayı kapsar. Değişkenler, temel prototiplemede bulunmayan dinamik veri ve durum yönetimini sağlar.

Ders 1 • Prototiplerle Kullanılabilirlik Testi

Test görevlerini planlamayı, katılımcıları toplamayı ve yönlendirilmiş oturumlar yürütmeyi kapsar. Yapılandırılmış test, yineleme döngüsü için eyleme dönüştürülebilir geri bildirim oluşturur.

Ders 2 • İnceleme Modu ve Varlık Dışa Aktarma

Geliştiricilere Figma'nın inceleme panelini nasıl kullanacaklarını ve tasarımcıların varlıkları nasıl dışa aktaracağını öğretir. Doğru dışa aktarma ayarları, tüm hedef çözünürlüklerde piksel mükemmelliğinde varlıklar sağlar.

Ders 3 • Sürüm Geçmişi ve Dosya Bakımı

Adlandırılmış sürümleri kaydetmeyi, geçmiş durumları geri yüklemeyi ve zaman içinde temiz bir dosya tutmayı kapsar. Sürüm kontrolü, çalışmayı korur ve sprintler boyunca yinelemeli tasarımı destekler.

Ders 4 • Geri Bildirimi Analiz Etme ve Değişiklikleri Önceliklendirme

Test bulgularından yakınlık haritası çıkarmayı, şiddet derecelendirmesini ve değişiklik önceliklendirmesini öğretir. Önceliklendirme, en yüksek etkili sorunların teslimattan önce düzeltilmesini sağlar.