Tasarım dünyasında işbirliği, hız ve tutarlılık artık birer lüks değil, zorunluluk. İşte tam da bu noktada Figma tasarım workflow’u devreye giriyor. Tarayıcı tabanlı yapısı, gerçek zamanlı işbirliği özellikleri ve güçlü component sistemiyle Figma, dünya genelinde milyonlarca tasarımcının birinci tercihi haline geldi.
Bu rehberde Figma’yı sıfırdan profesyonel seviyeye nasıl kullanacağınızı, auto layout’tan component sistemine, prototyping’den developer handoff’a kadar tüm süreci adım adım ele alacağız. İster yeni başlayan bir tasarımcı olun, ister mevcut workflow’unuzu iyileştirmek isteyin — bu yazı size eksiksiz bir yol haritası sunacak.
Ayrıca bu yazıda Figma’nın vektör çizim araçlarından grid sistemlerine, atomik tasarım prensiplerinden FigJam’e kadar geniş bir yelpazede pratik bilgiler bulacaksınız. Her bölümde adım adım uygulama talimatları ve gerçek dünya örnekleri yer alıyor. İster bir startup’ta tek tasarımcı olarak çalışın, ister büyük bir kurumsal ekibin parçası olun — buradaki bilgileri kendi projenize uyarlayabilirsiniz. Hazırsanız, Figma ile profesyonel tasarım dünyasına derinlemesine bir dalış yapalım.
Figma Neden Sektör Standardı?
Figma’nın tasarım endüstrisinde bu kadar hızlı benimsenmesinin birkaç temel nedeni var. Birincisi, tarayıcı tabanlı oluşu — herhangi bir yazılım kurmadan, herhangi bir işletim sisteminde çalışabiliyor. İkincisi, gerçek zamanlı işbirliği özelliği sayesinde birden fazla kişi aynı dosya üzerinde aynı anda çalışabiliyor. Üçüncüsü, ücretsiz planının sunduğu imkanlar bile bireysel kullanıcılar ve küçük ekipler için yeterli.
2026 itibarıyla Figma, sadece bir tasarım aracı olmaktan çıkıp bir ürün geliştirme platformuna dönüştü. Design system yönetimi, prototyping, developer handoff ve hatta sunum hazırlama gibi özellikleri tek çatı altında topluyor. Sketch, Adobe XD ve hatta InVision’ın pazar payını hızla eritmesinin arkasında bu bütüncül yaklaşım yatıyor.
Eğer UI/UX tasarım ilkeleri konusunda bilginizi tazelemek isterseniz, daha önce yayımladığımız rehberimize göz atmanızı öneririz.
Figma Temelleri: Arayüz, Katmanlar ve Frame’ler
Figma’ya ilk giriş yaptığınızda karşınıza çıkan arayüz, üç ana bölümden oluşur: sol tarafta katman paneli (Layers), ortada tuvas (Canvas) ve sağ tarafta özellik paneli (Properties). Bu üçlü yapı, tasarım sürecinin omurgasını oluşturur.
Frame’ler (Çerçeveler)
Figma’da her şey frame ile başlar. Frame’ler, tasarımınızın her bir ekranını veya bölümünü oluşturur. Bir web sayfası için 1440×900 px, mobil için 390×844 px gibi standart boyutlarda frame’ler oluşturarak başlamanız önerilir. Frame’ler iç içe yerleştirilebilir — bu özellik sayesinde karmaşık düzenleri hiyerarşik bir yapıda organize edebilirsiniz.
Katman Yapısı
Her frame, içinde alt katmanlar barındırır. Sol paneldeki katman ağacını düzenli tutmak, özellikle büyük projelerde hayati önem taşır. Katmanları isimlendirmek, gruplamak ve renk kodlarıyla işaretlemek, hem sizin hem ekibinizin işini kolaylaştırır.
Vektör Çizim Araçları ve Boolean İşlemleri
Figma’nın vektör çizim araçları, sıfırdan ikon, logo veya illüstrasyon tasarımları oluşturmak için güçlü bir altyapı sunar. Pen Tool (P), serbest çizimler yapmanızı sağlarken; Line, Rectangle, Ellipse ve Polygon araçları temel geometrik şekilleri hızlıca oluşturmanıza olanak tanır. Vektör noktaları (nodes) üzerinde oynayarak kavisli ve köşeli hatlar çizebilir, her bir noktanın kontrol kollarını (handles) ayarlayarak hassas eğriler elde edebilirsiniz.
Boolean işlemleri, birden fazla şekli birleştirerek yeni formlar oluşturmanızı sağlar. Union (birleştirme), Subtract (çıkarma), Intersect (kesişim) ve Exclude (hariç tutma) olmak üzere dört temel boolean işlemi vardır. Örneğin bir dairenin içinden kare çıkarmak için Subtract kullanabilir, iki kesişen dairenin ortak alanını korumak için Intersect tercih edebilirsiniz. Boolean sonuçlarını Flatten ederek tek bir vektör katmana dönüştürebilirsiniz. Bu teknikler, özellikle mobil uygulama ikonları ve logo tasarımlarında sıkça kullanılır.
Sayı ve Grid Sistemleri
Profesyonel tasarımda tutarlılığı sağlamak için grid sistemleri kullanmak büyük önem taşır. Figma’da frame ayarlarından Layout Grid ekleyebilirsiniz. Üç farklı grid türü sunulur: Grid (eşit kareler), Columns (sütun bazlı) ve Rows (satır bazlı). Web tasarımında en yaygın kullanılan yöntem, 12 sütunlu column grid’dir. Sütun genişliği, gutter (boşluk) ve margin değerlerini ayarlayarak Bootstrap veya Tailwind CSS ile uyumlu bir yapı oluşturabilirsiniz. Grid’i görünür yapmak için sol paneldeki göz ikonuna tıklayabilir, renk ve opaklık ayarlarıyla görselliği düzenleyebilirsiniz.
Renk seçimi konusunda bilgi almak isterseniz renk uyumu rehberimiz işinize yarayabilir.
Auto Layout ile Hızlı ve Esnek Tasarım
Auto Layout, Figma’nın en güçlü özelliklerinden biri ve modern bir Figma tasarım workflow’u için vazgeçilmezdir. Auto Layout, bir frame veya grubun içindeki elementleri otomatik olarak hizalar, boşlukları ayarlar ve içerik değiştikçe boyutu günceller. Kısacası, CSS’teki Flexbox’ın tasarım tarafındaki karşılığıdır.
Auto Layout Nasıl Eklenir?
Bir frame veya birden fazla seçili element üzerinde sağ tıklayıp “Add Auto Layout” (veyakısayol tuşu Shift+A) seçeneğiyle Auto Layout ekleyebilirsiniz. Sonrasında sağ panelden:
- Yön (Direction): Yatay (Horizontal) veya dikey (Vertical) akış
- Boşluk (Spacing): Elementler arası mesafe (gap)
- Padding: İç boşluklar (üst, alt, sol, sağ ayrı ayrı ayarlanabilir)
- Hizalama (Alignment): Elementlerin dikey/yatay hizalanması
- Resizing: Frame’in boyut davranışını belirleme (Hug Contents, Fill Container, Fixed)
Auto Layout Pratik İpuçları
Otomatik düzen ekledikten sonra, responsive davranışı test etmek için frame boyutunu değiştirin — elementlerin doğru şekilde yeniden konumlandığını göreceksiniz. İç içe Auto Layout’lar kullanarak karmaşık düzenler oluşturabilirsiniz. Örneğin bir kart bileşeni içinde başlık, açıklama ve buton üç ayrı dikey Auto Layout ile, kartın kendisi yatay bir Auto Layout ile sarılabilir.
Auto Layout ile Responsive Tasarım
Auto Layout’ın en değerli yönlerinden biri, responsive tasarım akışlarını doğrudan prototiplemeye imkân tanımasıdır. Fill Container seçeneğini kullanan elementler, parent frame’in genişliğine otomatik olarak uyum sağlar. Bir butonun her zaman konteynerin %100’ünü kaplamasını istiyorsanız, butonun width resizing değerini “Fill Container” olarak ayarlamanız yeterlidir. İçindeki metin içinse “Hug Contents” kullanarak metin uzadıkça butonun da genişlemesini sağlayabilirsiniz.
İç içe Auto Layout yapıları kullanarak mobil, tablet ve masaüstü görünümlerini tek bir component üzerinde test edebilirsiniz. Ana frame’in genişliğini değiştirerek (örneğin 390px’den 768px’ye ve 1440px’ye) tüm alt elementlerin nasıl yeniden konumlandığını anında görebilirsiniz. Bu yöntem, geliştirme ekibine responsive davranışı göstermek için oldukça etkili bir yol sunar.
Component Sistemi Oluşturma
Profesyonel bir Figma tasarım workflow’u, sağlam bir component sistemi üzerine kuruludur. Component’ler, tasarımınızın tekrar kullanılabilir parçalarıdır. Bir buton, bir kart, bir navigasyon çubuğu — bunları bir kez oluşturup projenin her yerinde kullanabilirsiniz.
Master Component ve Instance
Figma’da bir component oluşturduğunuzda, orijinal dosya Master Component (ana bileşen) olarak işaretlenir. Bu component’i her kullandığınız yerde bir Instance (kopya) oluşur. Master Component’te yaptığınız değişiklikler, tüm instance’lara otomatik olarak yansır. Ancak her instance’ın rengini, metnini veya boyutunu bağımsız olarak özelleştirebilirsiniz.
Component Variants
Bir butonun “primary”, “secondary”, “ghost” gibi farklı durumları olabilir. Bunları ayrı component’ler yerine variants olarak tek bir component altında toplayabilirsiniz. Properties panelinden “Add Variant” seçeneğiyle farklı durumları ekleyebilir, daha sonra instance’lar arasında kolayca geçiş yapabilirsiniz.
Design System Oluşturma
Büyük ölçekli projelerde, tüm component’leri tek bir design system dosyasında toplamak en iyi pratiktir. Bu dosya, projenin “tek doğruluk kaynağı” (single source of truth) olur. Diğer dosyalar bu sistemi referans olarak kullanır ve güncelleme yapıldığında tüm dosyalara yansır. Tipografi seçiminin tasarım sistemindeki önemini tipografi rehberimizde detaylıca ele almıştık.
Atomik Tasarım Prensibi ile Component Kategorizasyonu
Tasarım sisteminizi organize etmenin en etkili yollarından biri Atomik Tasarım (Atomic Design) metodolojisini uygulamaktır. Bu yaklaşıma göre component’ler beş hiyerarşik seviyede ele alınır: Atomlar (en küçük parçalar — buton, etiket, input), Moleküller (atomların birleşimi — arama çubuğu, form grubu), Organizmalar (karmaşık bileşenler — header, kart listesi), Şablonlar (sayfa düzeni — wireframe yapısı) ve Sayfalar (gerçek içerikle doldurulmuş şablonlar).
Figma’da bu hiyerarşiyi uygulamak için component’leri dosya veya sayfa bazında kategorize edebilirsiniz. Alt çizgi (_) ile başlayan isimler kullanarak (örneğin _button/primary, _input/text) atomları, daha sonra bu atomları birleştirerek molekülleri ve organizmaları oluşturabilirsiniz. Bu isimlendirme convention’ı, component panelinde düzenli bir hiyerarşi sağlar ve ekip üyelerinin doğru component’i hızlıca bulmasını kolaylaştırır.
Design Token Kullanımı
Design token’lar, tasarım kararlarını kodlaştırılmış değerler olarak saklayan bir yöntemdir. Renkler, font boyutları, boşluk değerleri, gölge stilleri gibi tüm görsel kararlar token’lara dönüştürülür. Bu sayede hem tasarımcı hem geliştirici aynı dili konuşur.
Figma’da Token Uygulama
Figma’nın Variables (Değişkenler) özelliği, design token’lar için mükemmeldir. Renk, sayı, metin ve boole tipinde değişkenler oluşturabilir, bunları koleksiyonlar altında organize edebilirsiniz. Örneğin bir “Color” koleksiyonu altında primary-500, primary-600, neutral-100 gibi değişkenler tanımlayarak renk yönetimini merkezileştirebilirsiniz.
Dark mode desteği için Figma’nın variable modes özelliğini kullanabilirsiniz. Light ve Dark olarak iki mod tanımlayıp, her mod için farklı renk değerleri atayabilirsiniz. Tek bir component ile tema geçişi sağlamak, bu özellikle mümkün olur.
Prototyping ve Etkileşim Tasarımı
Figma’nın prototyping özellikleri, statik tasarımları etkileşimli deneyimlere dönüştürmenizi sağlar. Bu sayede paydaşlarınıza ve geliştirme ekibine “nasıl çalışacağını” sadece anlatmak yerine gösterebilirsiniz.
Temel Prototyping Özellikleri
- Connections: Frame’ler arası geçişleri oklarla tanımlama
- Interactions: Tıklama, sürükleme, hover gibi tetikleyiciler
- Animations: Geçiş efektleri (dissolve, slide, move in/out)
- Smart Animate: Katman isimlerine dayalı otomatik animasyon
- Variables in Prototypes: Etkileşimlerde değişken kullanma
Advanced Prototyping
Figma’nın gelişmiş prototyping özellikleri sayesinde koşullu mantık (conditional logic), değişken atamaları ve çoklu akışlar oluşturabilirsiniz. Örneğin bir form akışında, kullanıcı doğru bilgi girdiğinde başarılı mesajına, hatalı girdiğinde hata mesajına yönlendirebilirsiniz. Bu özellikler, kullanıcı testleri öncesi yüksek doğrulukta prototipler oluşturmanıza olanak tanır.
Kullanıcı Testleri İçin Prototip Hazırlama
Prototipleri sadece paydaş sunumları için değil, aynı zamanda kullanıcı testleri için de hazırlayabilirsiniz. Test senaryoları oluştururken her akışın net bir başlangıç ve bitiş noktası olmasına dikkat edin. Kullanıcıdan beklenen eylemi açıklayan kısa yönlendirme metinleri (“Sepete ürün ekleyin”, “Ödeme sayfasına gidin”) ekleyerek test sürecini kolaylaştırabilirsiniz.
Figma’nın Prototype panelinden “Starting Frame” belirleyerek akışın nereden başlayacağını tanımlayabilirsiniz. Birden fazla test akışı varsa, her birini ayrı starting frame’ler ile sunabilirsiniz. Paylaşım için “Share Prototype” bağlantısını kullanarak test katılımcılarına özel bir link verebilirsiniz. Bu link, katılımcıların Figma hesabı olmasa bile prototipi görüntülemesine olanak tanır. Test sırasında katılımcının tıklamalarını ve geçişlerini gözlemleyerek tasarım kararlarınızın doğruluğunu değerlendirebilirsiniz.
Developer Handoff: Tasarımdan Kod Geçişine
Bir tasarım projesinin başarısı sadece güzel görseller üretmekle ölçülmez — tasarımların geliştirme ekibine sorunsuz bir şekilde aktarılması da kritik bir adımdır. Figma, bu konuda sektördeki en güçlü araçlardan birini sunar.
Inspect Modu
Figma’da bir element seçtiğinizde sağ panelden Inspect sekmesine tıkladığınızda, o elemente ait tüm CSS özellikleri görüntülenir: boyutlar, boşluklar, renkler, font özellikleri, gölge ve blur değerleri. Geliştirici bu bilgileri doğrudan kopyalayıp kullanabilir.
Dev Mode
Figma’nın Dev Mode özelliği, geliştiriciler için tasarlanmış özel bir arayüz sunar. Bu modda geliştiriciler, component’lerin nasıl kullanılacağını, hangi token’ların geçerli olduğunu ve kod snippet’lerini (CSS, iOS, Android) görüntüleyebilir. Spec dosyaları oluşturmak için saatler harcamak yerine, geliştiriciler doğrudan Figma dosyasından ihtiyaç duydukları her bilgiye ulaşabilir.
Figma Plugin Önerileri
Figma’nın plugin ekosistesi, tasarım sürecinizi önemli ölçüde hızlandırabilir. İşte mutlaka denemeniz gereken üç plugin:
Content Reel
Gerçekçi placeholder içerikler oluşturmak için tasarlanan Content Reel, isimler, adresler, telefon numaraları, fotoğraflar ve metinler sunar. Lorem ipsum yerine gerçekçi veriler kullanmak, tasarımın paydaşlar tarafından daha iyi anlaşılmasını sağlar.
Unsplash
Unsplash plugin’i, telifsiz yüksek kaliteli görselleri doğrudan Figma içinden aramanızı ve tasarıma eklemenizi sağlar. Milyonlarca ücretsiz görsel arasından seçim yaparak tasarımınızı zenginleştirebilirsiniz. Dışarıdan görsel indirip import etmekle vakit kaybetmezsiniz.
Iconify
Iconify, 100.000’den fazla ikonu tek bir plugin altında toplar. Material Design, Font Awesome, Feather, Phosphor gibi popüler ikon setlerine erişim sağlar. İkonları vektör olarak tasarıma ekleyebilir ve istediğiniz gibi düzenleyebilirsiniz.
Bu plugin’ler dışında Stark (erişilebilirlik kontrolü), Contrast (renk kontrast kontrolü) ve Autoflow (frame’ler arası otomatik ok çizimi) gibi plugin’ler de workflow’unuzu geliştirebilir.
Figma’da Versiyon Yönetimi ve Dosya Bakımı
Büyük projelerde Figma dosyalarının zamanla yavaşlaması kaçınılmaz bir sorundur. Bu durumun önüne geçmek için düzenli dosya bakımı yapmanız önerilir. Kullanılmayan component’leri ve eski frame’leri temizleyerek dosya boyutunu küçültebilirsiniz. Figma’nın Version History özelliği, dosyanızın geçmiş sürümlerini görüntülemenize ve geri dönmenize olanak tanır. Manuel olarak “Save to Version History” seçeneğiyle önemli noktalarda snapshot alabilirsiniz.
Dosya organizasyonu için Page yapısını etkin kullanın. Cover sayfası, design system, akışlar, keşif çalışmaları ve arşiv gibi kategorilere ayırarak dosyanızın navigasyonunu kolaylaştırın. Her sayfanın solunda bulunan sayfa ikonuna tıklayarak yeni sayfalar ekleyebilir, sürükleme yöntemiyle sıralarını değiştirebilirsiniz. Bu düzenli yapı, özellikle 50’den fazla ekrana sahip projelerde hayat kurtarıcıdır.
Ekip İçi İşbirliği İpuçları
Figma dışında tasarım sürecinizi zenginleştirmek için 2026 web tasarım trendleri ve UI/UX tasarım temelleri rehberlerimize de göz atabilirsiniz.
Figma’nın en büyük gücü işbirliği özellikleridir. Ancak bu gücü tam anlamıyla kullanmak için bazı kurallara uymak gerekir:
Dosya Yapısını Standartlaştırın
Her proje için tutarlı bir dosya yapısı belirleyin. Örneğin: Cover page → Design System → Flows → Explorations → Archive. Bu yapı, yeni ekip üyelerinin dosyaya adapte olmasını kolaylaştırır.
Branching Kullanın
Figma’nın branching özelliği, birden fazla tasarımcının aynı anda farklı versiyonlar üzerinde çalışmasına olanak tanır. Tıpkı Git’teki gibi, ana dosyadan bir dal kopyalayarak değişikliklerinizi yapabilir, ardından “merge” ile ana dosyaya entegre edebilirsiniz. Bu özellik, tasarım çakışmalarını önler ve versiyon kontrolü sağlar.
Yorum ve Geri Bildirim
Figma’nın yorumlama özelliği, paydaşlar ve geliştiricilerle doğrudan tasarımda iletişim kurmanızı sağlar. Belirli bir elemente yorum bırakarak, bağlamdan kopmadan geri bildirim alışverişi yapabilirsiniz. Yorumları “resolved” olarak işaretleyerek sürecin takibini kolaylaştırabilirsiniz.
FigJam ile Beyin Fırtınası ve Planlama
Figma’nın kardeş uygulaması FigJam, ekip içi beyin fırtınası, akış şeması oluşturma ve retrospektif toplantılar için tasarlanmış bir beyaz tahta aracıdır. Figma dosyalarınızla entegre çalışan FigJam, tasarım kararlarının arkasındaki düşünce sürecini belgelemenize yardımcı olur. Sticky notlar, çizimler, oylama sistemi ve zamanlayıcı gibi özellikleriyle tasarım sprintlerinin vazgeçilmez bir parçasıdır. FigJam’i tasarım sürecinize entegre etmek, ekip içi iletişimi güçlendirir ve karar alma süreçlerini şeffaf hale getirir.
Libraries Paylaşımı
Design system dosyanızı bir published library olarak paylaşın. Bu sayede tüm ekip, güncel component’lere ve token’lara erişebilir. Library güncellemeleri, ekip üyelerine bildirim olarak gider ve tek tıkla güncellenebilir.
Ekip çalışmasının verimliliği hakkında daha fazla ipucu için tasarımcı iş akışı rehberimize göz atabilirsiniz.
Sıkça Sorulan Sorular (SSS)
Figma ücretsiz mi? Ücretsiz planda neler var?
Evet, Figma’nın ücretsiz bir planı bulunuyor. Ücretsiz planda 3 aktif dosya, sınırsız kişisel dosya, temel prototyping özellikleri ve topluluk dosyalarına erişim imkânı sunuluyor. Bireysel kullanıcılar ve küçük projeler için ücretsiz plan genellikle yeterli oluyor. Ekip özellikleri ve sınırsız dosya için Professional plan (kullanıcı başına aylık $15) gerekiyor.
Figma’da tasarım sistemini nasıl organize etmeliyim?
En iyi pratik, design system dosyasını ayrı bir Figma dosyasında tutmak ve bir published library olarak paylaşmaktır. Bu dosyada renk paleti, tipografi stilleri, spacing değerleri, icon setleri ve tüm temel component’leri tanımlayın. Atomic Design prensibini takip ederek atomlar (buton, input), moleküller (form grubu, kart), organizmalar (header, footer) ve şablonlar şeklinde hiyerarşik bir yapı oluşturun. Bu yapıyı design token’larla destekleyerek geliştirme ekibiyle senkronizasyonu kolaylaştırın.
Figma’da prototyping nasıl yapılır?
Prototyping yapmak için öncelikle “Prototype” sekmesine geçin. Bir elementi (buton, kart vb.) seçin ve mavi noktayı sürükleyerek hedef frame’e bağlayın. Sonrasında sağ panelden tetikleyici (On Click, While Hover, After Delay vb.), geçiş animasyonu (Instant, Dissolve, Slide, Smart Animate) ve süre ayarlarını yapın. Akışın başlangıç frame’ini belirleyerek “Present” butonuyla prototipi test edin. Gelişmiş prototyping için koşullu mantık ve değişkenler de kullanabilirsiniz.
Sonuç
Figma tasarım workflow’u, modern tasarım sürecinin her aşamasını kapsayan bütüncül bir yaklaşımdır. Auto Layout ile esnek düzenler oluşturmak, component sistemiyle tutarlılığı korumak, design token’larla tasarım ile geliştirme arasında köprü kurmak, prototyping ile fikirleri test etmek ve developer handoff ile sorunsuz teslimat yapmak — tüm bu adımlar Figma’nın ekosistemi içinde doğal bir akış izler.
Bu rehberde ele aldığımız teknikleri adım adım uygulayarak tasarım sürecinizi önemli ölçüde iyileştirebilirsiniz. Unutmayın, mükemmel bir workflow bir günde kurulmaz — sürekli iyileştirme ve ekip geri bildirimleriyle olgunlaşır. Figma’yı sadece bir araç olarak değil, tasarım kültürünüzün bir parçası olarak benimseyin.
Tasarım workflow’unuzu iyileştirmeye başlarken küçük adımlar atmanızı öneririz. Önce component sisteminizi kurun, ardından auto layout kullanımını yaygınlaştırın, daha sonra design token’lara geçiş yapın. Her adımda ekibinizden geri bildirim alın ve workflow’unuzu buna göre şekillendirin. Unutmayın ki en iyi workflow, ekibinizin ihtiyaçlarına en uygun olandır. Figma’nın sunduğu esneklik sayesinde farklı ekipler farklı yaklaşımlar benimseyebilir ve her biri kendi içinde tutarlı bir sistem kurabilir.
Diğer tasarım rehberlerimiz:
- UI/UX Tasarım İlkeleri: Kullanıcı Deneyimi Rehberi
- Renk Uyumu: Tasarımda Renk Kombinasyonları
- Tipografi Nedir? Font Seçimi Rehberi
- Freelance Tasarımcı İş Akışı ve Zaman Yönetimi
- Landing Page Tasarımı: Güçlü Görsel Hiyerarşi
Figma’yı henüz denemediyseniz, figma.com adresinden ücretsiz hesap oluşturarak başlayabilirsiniz. Topluluk tarafından paylaşılan binlerce şablon ve design system’e Figma Community üzerinden erişebilirsiniz.
