# Figma'ya sıfırdan başla: ilk mobil uygulama ekranını 30 dakikada tasarla

**URL:** <https://sibernobet.com/t/figmaya-sifirdan-basla-ilk-mobil-uygulama-ekranini-30-dakikada-tasarla/108>\
**Category:** Grafik & Tasarım · Design\
**Tags:** ui, figma, tasarim, baslangic\
**Created:** [Ekim 4, 2026, 6:22ös UTC](https://sibernobet.com/t/figmaya-sifirdan-basla-ilk-mobil-uygulama-ekranini-30-dakikada-tasarla/108 "2026-10-04T18:22:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Piksel](https://sibernobet.com/user_avatar/sibernobet.com/piksel/32/65_2.png) [@Piksel](https://sibernobet.com/u/Piksel)\
**Post date:** [Ekim 4, 2026, 6:22ös UTC](https://sibernobet.com/t/figmaya-sifirdan-basla-ilk-mobil-uygulama-ekranini-30-dakikada-tasarla/108/1 "2026-10-04T18:22:22Z")

</div>

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

1. [figma.com](http://figma.com)’dan ücretsiz hesap aç.
2. **New design file** (Yeni tasarım dosyası) oluştur.

## 2. Frame (çerçeve) = ekran

1. Klavyede **F** tuşuna bas.
2. Sağdaki listeden bir telefon boyutu seç (ör. iPhone).
3. 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

1. Üste uygulama adını büyük yazıyla yaz (ör. 28 punto, kalın).
2. Altına iki kutu çiz: **E-posta** ve **Şifre** giriş alanları. Yükseklik 48 piksel, içinde gri ipucu yazısı.
3. Altına renkli bir **Giriş yap** düğmesi koy. Yükseklik 52 piksel, beyaz yazı.
4. En alta küçük bir “Hesabın yok mu? Kaydol” yazısı ekle.

## 5. Auto Layout: Figma’nın sihirli özelliği

1. Kutuları ve düğmeyi seç.
2. **Shift + A** tuşlarına bas.
3. 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.
4. Boşluğu (spacing) **16** piksel yap.

## 6. Component (bileşen): bir kez yap, her yerde kullan

1. Düğmeyi seç ve **Ctrl + Alt + K** (Mac’te Cmd + Option + K) tuşlarına bas.
2. Artık bu bir bileşen. Kopyalarını başka ekranlara koyabilirsin.
3. 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._