Figma, tarayıcıda çalışan ve ücretsiz planı olan bir arayüz tasarım aracıdır. Uygulama ve web sitesi ekranları tasarlamak için en yaygın araçlardan biridir. Bu rehberde basit bir giriş ekranı tasarlayarak temel kavramları öğreneceğiz.
1. Hesap ve ilk dosya
- figma.com’dan ücretsiz hesap aç.
- New design file (Yeni tasarım dosyası) oluştur.
2. Frame (çerçeve) = ekran
- Klavyede F tuşuna bas.
- Sağdaki listeden bir telefon boyutu seç (ör. iPhone).
- Bu çerçeve senin ekranındır; her şeyi bunun içine koyacaksın.
3. Temel şekiller ve yazı
- R: dikdörtgen (düğmeler ve kutular için)
- T: yazı (başlık, etiket)
- O: daire (profil resmi, ikon arka planı)
Köşeleri yuvarlatmak için sağ paneldeki corner radius (köşe yarıçapı) değerini 12-16 yap.
4. Giriş ekranını kur
- Üste uygulama adını büyük yazıyla yaz (ör. 28 punto, kalın).
- Altına iki kutu çiz: E-posta ve Şifre giriş alanları. Yükseklik 48 piksel, içinde gri ipucu yazısı.
- Altına renkli bir Giriş yap düğmesi koy. Yükseklik 52 piksel, beyaz yazı.
- En alta küçük bir “Hesabın yok mu? Kaydol” yazısı ekle.
5. Auto Layout: Figma’nın sihirli özelliği
- Kutuları ve düğmeyi seç.
- Shift + A tuşlarına bas.
- Artık öğeler aralarında eşit boşlukla sıralanır. Bir öğe eklediğinde ya da sildiğinde diğerleri kendiliğinden yerleşir.
- Boşluğu (spacing) 16 piksel yap.
6. Component (bileşen): bir kez yap, her yerde kullan
- Düğmeyi seç ve Ctrl + Alt + K (Mac’te Cmd + Option + K) tuşlarına bas.
- Artık bu bir bileşen. Kopyalarını başka ekranlara koyabilirsin.
- Ana bileşenin rengini değiştirdiğinde bütün kopyalar da değişir.
7. Paylaş ve önizle
- Sağ üstteki Present (Sunum) düğmesiyle ekranı önizle.
- Figma mobil uygulamasıyla tasarımı telefonunda canlı görebilirsin.
Sonraki adımlar
- Prototip: Düğmeyi başka bir ekrana bağla, tıklanabilir bir demo yap.
- Renk ve boşluk kuralları için kategorideki “Renk seçimi” ve “Izgara ve boşluk” konularına bak.
Not: Kısayollar ve menü adları Figma güncellendikçe değişebilir. Bir şey bulamazsan aşağıya yaz.