Figma Nasıl Kullanılır: İlk Tasarımınız

Figma nasıl kullanılır sorusuna en hızlı yanıt, teoriyi okumak değil, doğrudan bir tasarıma başlamaktır. Figma tarayıcıda çalışan, ücretsiz bir başlangıç planı sunan ve hem arayüz tasarımı hem de prototipleme için bugün sektörün fiili standardı haline gelmiş bir araçtır. Bu yazıda hiç açmadığınızı varsayarak başlıyor; arayüzü tanıyor, ilk frame'inizi oluşturuyor, temel araçlarla basit bir mobil kart tasarlıyor ve dosyanızı paylaşılabilir hale getiriyoruz. Amaç, sonunda elinizde gerçekten yapmış olduğunuz bir tasarımın olması.

Figma'yı açmak ve ilk dosyayı oluşturmak

Figma'yı kullanmaya başlamak için tarayıcıdan figma.com adresine girip ücretsiz bir hesap açmanız yeterli. İsterseniz masaüstü uygulamasını da indirebilirsiniz; ikisi de aynı çekirdeği kullandığı için fark yok. Giriş yaptığınızda sizi bir dosya yöneticisi (Files) karşılar. Buradan sağ üstteki düğmeyle yeni bir design file oluşturduğunuzda boş, sonsuz bir tuval açılır. Bu tuvale Figma dilinde canvas denir ve gerçekten sınırsızdır: istediğiniz kadar tasarımı yan yana koyabilirsiniz.

Yeni başlayanlar için önemli bir alışkanlık: dosyanıza hemen bir isim verin. Sol üstteki başlığa tıklayıp örneğin "İlk Tasarımım" yazın. Figma her değişikliği otomatik kaydeder, yani Ctrl/Cmd + S aramanıza gerek yok.

Arayüzü tanımak: üç ana bölge

Figma arayüzü ilk bakışta kalabalık görünse de aslında üç mantıklı bölgeden oluşur:

Sol panel (Layers / Assets): Tasarımınızdaki tüm katmanların ağaç yapısı burada listelenir. Bir tasarım büyüdükçe burası haritanız olur.
Orta alan (Canvas): Çizim yaptığınız asıl çalışma alanı. Fare tekerleğiyle yakınlaşıp uzaklaşır, Space tuşunu basılı tutarak kaydırırsınız.
Sağ panel (Design): Seçili nesnenin boyut, konum, renk, kenarlık, gölge gibi tüm özelliklerini buradan ayarlarsınız. Hiçbir şey seçili değilken bu panel sayfa ayarlarını gösterir.

Üstteki araç çubuğunda ise en çok kullanacağınız araçlar bulunur. Hepsinin bir klavye kısayolu vardır ve bunları öğrenmek hızınızı katlar: taşıma için V, frame için F, dikdörtgen için R, metin için T.

Frame nedir ve neden her şeyin temelidir?

Figma'da bir tasarımın temelini frame oluşturur. Frame'i bir "kapsayıcı kutu" gibi düşünün: bir telefon ekranı, bir web sayfası ya da bir kartvizit. İçine koyduğunuz her şey o frame'e ait olur ve birlikte taşınır. Klasik bir tasarım programındaki "tuval" ya da "artboard" kavramının Figma'daki karşılığıdır.

F tuşuna bastığınızda sağ panelde hazır boyutlar belirir: iPhone, Android, Desktop, tablet ve daha fazlası. İlk tasarımımız için bir iPhone 14 & 15 Pro boyutunu (393 × 852) seçelim. Tuvalde bir telefon ekranı belirir. Artık çalışacağımız zeminimiz hazır.

Temel araçlarla ilk tasarımı yapmak

Şimdi bu telefon ekranının içine basit bir "profil kartı" tasarlayalım. Adım adım gidelim:

Arka plan: Frame seçiliyken sağ panelden Fill rengini açık gri bir tona (#F4F4F5 gibi) ayarlayın.
Kartı çizin: R ile bir dikdörtgen çizin. Sağ panelden köşeleri yuvarlamak için Corner radius değerini 16 yapın, fill rengini beyaz seçin. İsterseniz Effects bölümünden hafif bir Drop shadow ekleyin.
Avatar ekleyin: Yine R ile küçük bir kare çizin, corner radius değerini yarısına eşitleyerek (örneğin 40×40 kare için 20) onu daire haline getirin.
Metin ekleyin: T tuşuna basıp kartın üstüne tıklayın ve bir isim yazın. Sağ paneldeki Text bölümünden yazı tipini, boyutunu ve kalınlığını ayarlayın. Altına daha küçük, gri bir alt başlık ekleyin.

Hizalama için Figma'nın en sevdiğim özelliği devreye girer: iki nesneyi seçtiğinizde aralarında kırmızı kılavuz çizgileri ve mesafe ölçüleri belirir. Bir nesneyi diğerine yaklaştırdığınızda merkezler hizalandığında otomatik olarak "yapışır". Birden çok nesneyi seçip sağ paneldeki hizalama düğmeleriyle ortalayabilir ya da eşit aralıklarla dağıtabilirsiniz.

Renk, tipografi ve düzen için küçük ipuçları

İyi bir ilk tasarım için süslü olmasına değil, tutarlı olmasına odaklanın:

Az renk kullanın: Bir nötr (gri tonları), bir ana renk ve bir vurgu rengi çoğu arayüz için yeter.
Tutarlı boşluk: 8'in katlarıyla çalışın (8, 16, 24, 32 piksel). Bu "8 nokta ızgarası" düzeninizi anında profesyonelleştirir.
Tek bir yazı tipi: Başlangıçta Inter gibi tek bir ailenin farklı kalınlıklarını kullanın; ekranda dört farklı font karmaşa yaratır.

Bir öğeyi kopyalamak için Ctrl/Cmd + D veya Alt tuşunu basılı tutup sürükleme işinizi çok hızlandırır. Bir hata yaptığınızda Ctrl/Cmd + Z her zaman yanınızda.

Tasarımı paylaşmak ve önizlemek

Tasarımınız hazır olduğunda iki şey yapabilirsiniz. İlki, sağ üstteki Present (oynat) düğmesiyle tasarımı gerçek bir ekrandaymış gibi tam boy görüntülemek. İkincisi, Share düğmesiyle bir bağlantı oluşturup arkadaşınıza ya da müşterinize göndermek. Figma'nın gücü tam da burada: paylaştığınız kişi hiçbir şey kurmadan tarayıcıda tasarımı görebilir, hatta izin verirseniz yorum bırakabilir.

Bir görseli dışa aktarmak isterseniz nesneyi seçip sağ panelin en altındaki Export bölümünden PNG, JPG ya da SVG formatında indirebilirsiniz. Web için genelde PNG ya da SVG, baskı için yüksek çözünürlüklü PNG iş görür.

Sık Sorulan Sorular

Figma ücretsiz mi?

Evet, Figma bireysel kullanım için cömert bir ücretsiz plan sunar. Bu planla sınırsız kişisel dosya oluşturabilir, sınırlı sayıda paylaşılan proje yürütebilirsiniz. Başlangıç ve öğrenme için ücretsiz plan fazlasıyla yeterlidir; ekip ve sınırsız sürüm geçmişi gibi özellikler ücretli planlarda gelir.

Tasarım deneyimim yok, yine de öğrenebilir miyim?

Kesinlikle. Figma'nın öğrenme eğrisi yumuşaktır ve aracı kullanmak için kod ya da çizim yeteneği gerekmez. Bu yazıdaki gibi küçük bir kartla başlayıp her hafta yeni bir ekran tasarlayarak ilerlerseniz, birkaç haftada temel arayüzleri rahatça kurabilirsiniz.

Photoshop yerine Figma mı kullanmalıyım?

Arayüz (UI/UX) tasarımı, prototip ve ekip iş birliği için Figma çok daha pratiktir çünkü tarayıcıda çalışır ve gerçek zamanlı paylaşım sunar. Photoshop ise foto manipülasyonu ve raster düzenleme için güçlüdür. Yani amaç farklı: dijital ürün tasarlıyorsanız Figma doğru tercihtir.

İlk tasarımınızı yapmaya hazır mısınız? Eğer bir markanın arayüzünü, logosunu ya da tam bir ürün ekranını profesyonelce kurmak isterseniz, fikrinizi birlikte hayata geçirelim. Benimle iletişime geçin ve projenizden bahsedin.