Figma Tasarım Rehberi

Bu rehberi front-end ekibimiz olarak sizler için hazırladık. Projelerimizi kodlarken AI'dan destek almaya başladık ve AI, Figma tasarımlarınızı inceleyerek koda dönüştürme sürecinde bize yardımcı oluyor. Bu dokümantasyonda açıklanan Styles, Components ve Variables özelliklerini kullandığınızda, AI için daha zengin bir context sağlamış olursunuz ve tasarımlarınızı çok daha doğru şekilde kodlayabilir. Ayrıca bu yöntemleri proje başında uyguladığınızda, tasarım sürecinizde de size büyük kolaylık sağlar - tutarlı renkler, tipografi ve bileşenler kullanarak çalışmanız hem daha organize hem de daha hızlı ilerler. Sonuç olarak hem bizim kodlama sürecimiz hızlanır, hem de sizin tasarımlarınız pixel-perfect şekilde hayata geçer.

Design System Fundamentals

Bu bölüm, Figma tasarımlarınızı AI ve developer'lar için optimize etmenin temel prensiplerini içerir. Tutarlı isimlendirme, semantik yapılandırma ve etkili handoff süreçleri ile tasarım-kod entegrasyonunu hızlandırın.

Typography System

Typography System, projede kullanılan tüm metin stillerinin merkezi olarak yönetildiği, component-based yaklaşımla organize edilmiş sistemdir.

Neden Önemli: Typography system oluşturduğunuzda, AI coding agent'lar tüm text stillerinizi anlayarak web sitesinin CSS stillerine doğrudan tanımlayabilir. Tek bir component değişikliği tüm projede güncellemeyi sağlar.

Typography Page Oluşturma

1. Typography Sayfası Açın:

  • Figma dosyanızda "📝 Typography" adında yeni sayfa oluşturun
  • Tüm başlık seviyelerini görsel olarak düzenleyin

2. Text Hierarchy Tanımlayın:

H1 - Main Heading (48px/56px line-height)
H2 - Section Heading (40px/48px line-height)
H3 - Subsection Heading (32px/40px line-height)
H4 - Component Heading (24px/32px line-height)
H5 - Card Heading (20px/28px line-height)
Body Large (18px/28px line-height)
Body (16px/24px line-height)
Body Small (14px/20px line-height)
Caption (12px/16px line-height)

Typography Components

Her text stili için component oluşturun:

typography/heading-1
typography/heading-2
typography/body-large
typography/body
typography/caption

Typography Variables

Variables ile tutarlı sizing:

text/heading-1/size → 48
text/heading-1/line-height → 56
text/heading-2/size → 40
text/body/size → 16
text/body/line-height → 24

AI & Developer Integration

AI Agent Benefits:

  • Tekrar kullanılabilir text stillerini otomatik oluşturabilir
  • Text stillerinizi web sitesi için uygun formata dönüştürür
  • Typography hierarchy'sini anlayabilir ve semantic HTML oluşturabilir

💡 Pro Tip: Her typography component'i için description yazın: "Ana sayfa başlıkları için kullanılır"

Color System

Color System, projede kullanılan tüm renklerin merkezi olarak yönetildiği, variables ile organize edilmiş yapıdır. Brand identity'den functional color'lara kadar tutarlı renk yönetimi sağlar.

Neden Önemli: Color system oluşturduğunuzda, AI coding agent'lar tüm renk paletinizi anlayarak CSS renk değişkenlerini otomatik oluşturabilir. Tek değişken güncellemesi tüm projeyi etkiler.

Colors Page Oluşturma

1. Colors Sayfası Açın:

  • Figma dosyanızda "🎨 Colors" adında yeni sayfa oluşturun
  • Tüm color palette'inizi görsel olarak düzenleyin

2. Color Categories Tanımlayın:

Brand Colors (Marka renkleri)
├── Primary (Ana marka rengi)
├── Secondary (İkincil marka rengi)
└── Accent (Vurgu rengi)

Semantic Colors (Anlam taşıyan renkler)
├── Success (Başarı - yeşil tonları)
├── Warning (Uyarı - sarı/turuncu tonları)
├── Error (Hata - kırmızı tonları)
└── Info (Bilgi - mavi tonları)

Neutral Colors (Nötr renkler)
├── Text Primary (#1a1a1a)
├── Text Secondary (#666666)
├── Background (#ffffff)
├── Surface (#f8f9fa)
└── Border (#e9ecef)

Color Variables

Variables ile color tokens:

color/brand/primary → #0066cc
color/brand/secondary → #ff6b35
color/semantic/success → #28a745
color/semantic/error → #dc3545
color/neutral/text-primary → #1a1a1a
color/neutral/background → #ffffff

Color Components

Her renk için swatch component oluşturun:

color-swatch/brand-primary
color-swatch/semantic-success
color-swatch/neutral-text

AI & Developer Integration

AI Agent Benefits:

  • Renk paletinizi otomatik olarak web sitesine aktarır
  • Tüm renklerinizi tekrar kullanılabilir hale getirir
  • Anlamlı renk isimlendirmelerinizi web sitesinde de korur
  • Dark mode varyasyonlarını anlayabilir

💡 Pro Tip: Her color variable'ı için usage description yazın: "Primary buttons ve links için kullanılır"

BEM Naming Convention (Master Guide)

BEM Nedir?

BEM (Block Element Modifier), CSS class isimlendirme metodolojisidir ve Figma layer isimlendirmesinde de son derece etkili bir yaklaşımdır. Bu sistem, tasarımcı ve developer arasında mükemmel bir köprü görevi görür.

Neden Önemli: BEM metodolojisi kullandığınızda, AI ve developer'lar tasarımınızdaki her layer'ın ne olduğunu ve nasıl kullanılması gerektiğini anında anlayabilir. Layer isimleri direkt olarak CSS class'larına dönüşebilir, bu da kodlama sürecini inanılmaz derecede hızlandırır.

Temel Format

Block__Element--Modifier

Figma'da Kullanım:

  • Block = Ana component/container (header, card, navbar)
  • Element = İç elementler (__logo, __title, __button)
  • Modifier = Varyantlar/durumlar (--primary, --active, --large)

Doğru vs Yanlış Örnekler

✅ İstenen Yapı (Doğru BEM Kullanımı):

header
├── header__logo
├── header__navigation
├── header__navigation__item--home
├── header__navigation__item--about
├── header__navigation__item--contact
├── header__search
└── header__hamburger-menu

Faydalar:

  • 🔍 Arama Kolaylığı: "header__logo" ile logo'yu hemen bulursunuz
  • 🎯 Developer Handoff: CSS class'lar direkt mapping
  • 📋 Tutarlılık: Aynı pattern tüm component'lerde
  • 🧱 Hierarchy: Parent-child ilişkisi net görünür

❌ İstenmeyen Yapı (Yanlış İsimlendirme):

Rectangle (Header arka planı - anlamsız isim)
Text (Navigasyon linki - hangi link?)
Text (Başka bir link - sıra karışık)
Image (Logo mu hamburger menu mü?)
Text (Üçüncü link - tutarsız)
Image (Diğer image - ne olduğu belirsiz)
Rectangle (Gereksiz transparan layer)

Sorunlar:

  • ❌ Layer'ların isimleri anlamsız
  • ❌ Sıra karışık ve mantıksız
  • ❌ Hangi elementin ne olduğu belirsiz
  • ❌ AI ve developer için anlaşılmaz

Component Hierarchy ile BEM

Card Component Örneği:

card (Ana container)
├── card__header (Üst bölüm)
├── card__image (Görsel)
├── card__content (İçerik alanı)
├── card__title (Başlık)
├── card__description (Açıklama)
├── card__footer (Alt bölüm)
├── card__button--primary (Birincil buton)
└── card__badge--featured (Öne çıkan badge)

navbar
├── navbar__brand (Logo alanı)
├── navbar__logo
├── navbar__menu (Ana menü)
├── navbar__item
├── navbar__item--active (Aktif sayfa)
├── navbar__item--disabled (Pasif link)
├── navbar__search
└── navbar__toggle (Mobil menü butonu)

BEM Best Practices

✅ İyi BEM Isimlendirme:

Block Örnekleri:
├── header
├── card
├── sidebar
├── modal
├── form

Element Örnekleri:
├── header__logo
├── card__title
├── form__input
├── modal__close-button

Modifier Örnekleri:
├── button--primary
├── card--featured
├── input--error
├── modal--large

❌ Kötü İsimlendirme:

❌ Genel/Belirsiz:
├── container
├── wrapper
├── box
├── item

❌ Positional:
├── left-sidebar
├── top-navigation
├── bottom-button

❌ Visual Description:
├── red-button
├── big-text
├── blue-card

💡 BEM İpuçları:

  • Anlamlı isimler: Ne olduğu belli olsun
  • Tutarlı format: Tüm projede aynı sistemi kullanın
  • Nested elementi: Çok derin nested'dan kaçının (max 2-3 seviye)
  • Semantic naming: Görünüm değil, işlevi belirtin

Örnek Dönüşüm:

❌ Önce: "Blue Big Button Copy 2"
✅ Sonra: "cta-section__button--primary"

❌ Önce: "Text Field Error"
✅ Sonra: "form__input--error"

❌ Önce: "Card Background Rectangle"
✅ Sonra: "product-card__background"

Styles

Styles Nedir?

Styles (Stiller), tasarım özelliklerinin koleksiyonlarıdır ve tasarımlarınızda tutarlılığı sağlamanın temel araçlarından biridir. Figma'da styles kullanarak renkler, metinler, efektler ve layout guide'lar için yeniden kullanılabilir özellikler tanımlayabilirsiniz.

Neden Önemli: Tutarlı style'lar kullandığınızda, AI tasarımınızdaki renk ve tipografi sistemini anlayarak aynı değerleri kodda da kullanabilir. Bu da kodlama sürecini hızlandırır ve tasarım-kod tutarlılığını sağlar.

Style Türleri

Figma'da 4 ana style türü bulunur:

1. Color Styles (Renk Stilleri)

  • Fill colors (Dolgu renkleri): Şekillerin iç rengi
  • Stroke colors (Kontur renkleri): Çerçeve ve çizgi renkleri
  • Gradients (Gradyanlar): Renk geçişleri
  • Background colors (Arka plan renkleri): Frame arka planları

2. Text Styles (Metin Stilleri)

  • Font family (Font ailesi): Inter, Roboto vb.
  • Font size (Font boyutu): 14px, 16px, 24px vb.
  • Font weight (Font kalınlığı): Regular, Medium, Bold
  • Line height (Satır yüksekliği): 1.2, 1.5 vb.
  • Letter spacing (Harf aralığı): 0.02em vb.

3. Effect Styles (Efekt Stilleri)

  • Drop shadow (Gölge efekti)
  • Inner shadow (İç gölge)
  • Layer blur (Katman bulanıklığı)
  • Background blur (Arka plan bulanıklığı)

4. Layout Guide Styles (Layout Rehber Stilleri)

  • Row (Satır): Yatay grid sistemi
  • Column (Sütun): Dikey grid sistemi
  • Uniform grid (Düzgün grid): Eşit kare grid

Style Oluşturma Yöntemleri

Yöntem 1: Mevcut Objeden

  1. Style oluşturmak istediğiniz objeyi seçin
  2. Sağ panelde ilgili özellik bölümünün yanındaki ikona tıklayın
  3. Style picker'da ➕ ikonuna tıklayın
  4. Style'a anlamlı bir isim ve açıklama verin
  5. "Create style" butonuna tıklayın

Yöntem 2: Local Styles'dan

  1. Canvas'ta hiçbir şey seçili değilken
  2. Sağ panelde "Local styles" bölümüne gidin
  3. ➕ butonuna tıklayın
  4. Oluşturmak istediğiniz style türünü seçin

Style Yönetimi

Gruplandırma

Style'larınızı organize etmek için iki yöntem kullanabilirsiniz:

BEM İsimlendirme:

brand__primary
brand__secondary
text-heading__h1
text-heading__h2

Folder Sistemi:

  • Birden fazla style seçin
  • Sağ tık → "Add new folder"
  • Folder'a isim verin

Style Düzenleme

  1. Style'ın üzerine hover edin
  2. Adjust (⚙️) ikonuna tıklayın
  3. Özellikleri düzenleyin
  4. Değişiklikler otomatik olarak uygulanır

İpuçları

💡 Style isimlendirmesinde:

  • Fonksiyonu belirtin (örn: "brand__primary" vs "blue")
  • Tutarlı kategorizasyon kullanın
  • BEM metodolojisi ile gruplama yapın (block__element--modifier)

💡 Optimization İpuçları:

  • Her style için açıklama yazın
  • Tutarlı isimlendirme konvansiyonu kullanın
  • Gereksiz style'ları temizleyin

Detaylı Bilgi

Daha detaylı bilgi için resmi Figma dokümantasyonunu inceleyin:

Video Tutorial: Figma YouTube Kanalı üzerinden tutorial videolarına erişebilirsiniz.

🎥 Styles Video Eğitimleri

Create and manage styles in Figma

Components111

Components Nedir?

Components (Bileşenler), tasarımlarınızda yeniden kullanabileceğiniz UI elementleridir. Tutarlı tasarımlar oluşturmanın ve bunları projeler arasında yönetmenin temel aracıdır.

Neden Önemli: İyi organize edilmiş component'ler, AI'ın tasarımınızdaki tekrar eden yapıları anlayarak aynı mantıkla modüler kod bileşenleri yazmasını sağlar. Böylece tasarımınızdaki her buton, kart veya form elementi kodda da aynı şekilde organize olur.

Component Anatomisi

Component sisteminin iki temel parçası vardır:

1. Main Component (Ana Bileşen)

  • Component'in özelliklerini tanımlar
  • Mor renkte ikon ile gösterilir
  • Tüm instance'lara güncellemeleri dağıtır

2. Instance (Örnek)

  • Main component'in kopyası
  • Ana bileşenle bağlantılı kalır
  • Bazı özellikler üzerine yazılabilir (override)

Component Oluşturma

Yöntem 1: Tek Component

  1. Oluşturmak istediğiniz layer'ları seçin
  2. Toolbar'da ❖ butonuna tıklayın veya ⌥⌘K (Mac) / Ctrl+Alt+K (Windows)
  3. Component adını ve açıklamasını girin

Yöntem 2: Bulk Component Oluşturma

  1. Birden fazla frame/grup seçin
  2. Properties panelde ❖ butonuna tıklayın
  3. "Create Multiple components" seçin

Component İsimlendirme

Component'lerin anlamlı ve tutarlı şekilde isimlendirilmesi, AI ve developer'ların tasarımınızı anlayabilmesi için kritik öneme sahiptir.

✅ İyi İsimlendirme Örnekleri:

button--primary--large
card-product--featured
icon-24__arrow--right
modal--confirmation

📚 Detaylı BEM Rehberi: Component isimlendirmede BEM metodolojisini kullanarak semantic ve tutarlı isimler oluşturun. Kapsamlı rehber için → BEM Naming Convention (Master Guide)

Instance Kullanımı

Instance Oluşturma

Assets Panel'den:

  1. Sol panelde "Assets" sekmesini açın
  2. Kullanmak istediğiniz component'i bulun
  3. Canvas'a sürükleyin

Instance Override

Instance'larda bazı özellikleri değiştirebilirsiniz:

  • Text içeriği değiştirme
  • Resim değiştirme
  • Style özelliklerini güncelleme
  • Component properties ayarlama

Component Best Practices

🚀 Tasarım Stratejisi:

  1. Auto Layout kullanın

    • Component'leri responsive yapın
    • Dynamic content'e hazır hale getirin

  2. Smart naming convention

    • Tutarlı isimlendirme sistemi
    • Kategorize edilmiş organizasyon

💡 Component Optimization:

  • Component'leri anlamlı isimlendirin
  • Component descriptions yazın
  • Tutarlı hiyerarşi oluşturun

Detaylı Bilgi

Daha detaylı bilgi için resmi Figma dokümantasyonunu inceleyin:

Video Tutorial: Figma YouTube Kanalı üzerinden component tutorial videolarına erişebilirsiniz.

🎥 Components Video Eğitimleri

Creating Components in Figma

Component organization example

Variables

Variables Nedir?

Variables (Değişkenler), yeniden kullanılabilir değerleri saklayan ve tasarım özelliklerine uygulanabilen güçlü araçlardır. Design token'ları oluşturmak, temalar arasında geçiş yapmak ve dinamik tasarımlar oluşturmak için kullanılır.

Neden Önemli: Figma'da variables kullandığınızda, AI bu değişkenleri anlayarak kodda da aynı değişken sistemini oluşturabilir. Örneğin tasarımda primary-color değişkeni varsa, kodda da aynı isimdeki değişkeni kullanarak kodlama sürecini kolaylaştırır ve hızlandırır.

Variable Türleri

Figma'da 4 ana variable türü bulunur:

1. Color Variables (Renk Değişkenleri)

Renk değerlerini saklayan variables:

  • Solid fills: #FFFFFF, #3B82F6
  • Hex, RGB, HSL değerleri

2. Number Variables (Sayı Değişkenleri)

Sayısal değerler için:

  • Spacing: 4, 8, 16, 24, 32
  • Sizing: 44, 200, 400
  • Opacity: 0.5, 0.8, 1

3. String Variables (Metin Değişkenleri)

Metin içerikleri için:

  • Button text: "Devam Et", "Kaydet"
  • Error messages: "Bu alan zorunludur"
  • Placeholders: "Aranacak kelime..."

4. Boolean Variables (Boolean Değişkenleri)

True/False değerleri için:

  • States: is-loading, is-selected
  • Visibility: show-icon, has-badge

Collections ve Modes

Collections (Koleksiyonlar)

Variable'ları organize etmek için gruplar:

Collection Örnekleri:
├── 🎨 Colors (Renkler)
├── 📏 Spacing (Boşluklar)
├── 📝 Typography (Tipografi)
└── 📱 Breakpoints (Kesim Noktaları)

Variable Oluşturma

Yöntem 1: Variables Panel'den

  1. Sağ panelde "Variables" sekmesini açın
  2. ➕ butonuna tıklayın
  3. Variable türünü seçin (Color, Number, String, Boolean)
  4. Koleksiyon oluşturun veya mevcut birini seçin
  5. Variable adını ve değerini girin

Yöntem 2: Mevcut Değerlerden

  1. Bir color/number property'yi seçin
  2. Property yanındaki variable ikonuna tıklayın
  3. "Create variable" seçeneğini seçin
  4. Variable'ı isimlendirip koleksiyona atayın

Variable İsimlendirme

✅ Semantic İsimlendirme:

color/
├── brand/primary → Marka ana rengi
├── semantic/success → Başarı rengi
├── neutral/background → Nötr arka plan
└── text/primary → Ana metin rengi

spacing/
├── component/button/padding → Buton iç boşluğu
├── layout/section/gap → Bölüm arası boşluk
└── grid/gutter → Grid oluk genişliği

❌ Literal İsimlendirme:

blue-500 → ❌ Rengin kendisi
large-spacing → ❌ Boyut belirtici
dark-text → ❌ Görünüm odaklı

Variable Aliasing

Variables'ın en güçlü özelliği aliasing (başka variable'lara referans verme):

Primitive → Semantic Yapısı:

Base Variables:
├── primitive/blue/500 → #3B82F6
├── primitive/red/500 → #EF4444
└── primitive/gray/100 → #F3F4F6

Semantic Variables (Alias):
├── color/brand/primary → {primitive/blue/500}
├── color/semantic/error → {primitive/red/500}
└── color/background/subtle → {primitive/gray/100}

Avantajı: Primitive değeri değiştirdiğinizde, onu kullanan tüm semantic variable'lar otomatik güncellenir.

Variables Best Practices

🚀 Organization Strategy:

  1. Collection Structure

    ├── 🎨 Primitives (Ham değerler)
├── 🎯 Semantic (Anlamsal)
└── ❖ Component (Bileşen özel)

  2. Naming Convention

    • category/sub-category/property formatı
    • Semantic isimlendirme kullanın
    • Tutarlı terminoloji

💡 Variable Optimization:

  • Variable names'i anlamlı yapın
  • Collections'ı mantıksal kategorilere ayırın
  • Aliasing kullanarak hiyerarşi oluşturun

Detaylı Bilgi

Daha detaylı bilgi için resmi Figma dokümantasyonunu inceleyin:

Video Tutorial: Figma YouTube Kanalı üzerinden variables tutorial videolarına erişebilirsiniz.

Playground File: Variables Playground - Variables ile pratik yapmak için community dosyası.

Auto Layout

Auto Layout Nedir?

Auto Layout, frame'lerin içeriğe göre otomatik olarak boyutlanması ve düzenlenmesini sağlayan güçlü bir özelliktir. Tasarımlarınızı responsive ve dinamik hale getirerek, içerik değiştiğinde otomatik olarak uyum sağlamasını mümkün kılar.

Neden Önemli: Auto Layout kullandığınızda, AI tasarımınızdaki esnek yapıları anlayarak kodda da birebir aynısını CSS Flexbox olarak uygulayabilir. Figma'daki Auto Layout ile CSS Flexbox birebir aynı mantıkla çalışır - yön, hizalama, boşluklar hepsi aynı şekilde koda yansır. Ayrıca Auto Layout ile tasarım yapmanız sizin için de büyük kolaylık sağlar: içerik değiştiğinde otomatik boyutlanır, responsive davranış gösterir ve tutarlı boşluklar oluşturur.

Auto Layout Türleri

Figma'da 3 ana Auto Layout akışı bulunur:

Auto Layout Flow Types - Vertical, Horizontal ve Wrap örnekleri Vertical, Horizontal ve Wrap auto layout akışlarının görsel karşılaştırması

1. Vertical (Dikey)

Elementleri Y ekseni boyunca (yukarıdan aşağıya) düzenler:

  • Todo listesi öğeleri
  • Blog yazısı içerikleri
  • Form elemanları
  • Mobil menü öğeleri

2. Horizontal (Yatay)

Elementleri X ekseni boyunca (soldan sağa) düzenler:

  • Buton grupları
  • Navigasyon menüleri
  • Sosyal medya ikonları
  • Tablet/desktop menüler

Wrap özelliği: Horizontal layout'ta elementler sığmadığında alt satıra geçebilir.

3. Grid (Beta)

Elementleri satır ve sütunlar halinde düzenler:

  • Ürün galerileri
  • Dashboard layoutları
  • Bento box tasarımları
  • Responsive grid sistemleri

Grid Auto Layout Example Grid Auto Layout ile oluşturulan responsive bento box layout örneği

Temel Auto Layout Özellikleri

Padding (İç Boşluk)

Frame kenarları ile içindeki elementler arası boşluk:

  • Uniform: Tüm kenarlar eşit (örn: 16px)
  • Horizontal/Vertical: Yatay ve dikey farklı (örn: 12px/8px)
  • Individual: Her kenar ayrı (örn: top:8px, right:12px, bottom:8px, left:12px)

Gap Between (Elementler Arası Boşluk)

Frame içindeki elementler arası mesafe:

  • Fixed değer: Sabit boşluk (örn: 8px, 12px, 16px)
  • Auto: Mümkün olan en büyük boşluk (justify-content: space-between)

Alignment (Hizalama)

Elementlerin frame içindeki pozisyonu:

  • Start/Center/End: Ana eksende hizalama
  • Stretch: Elementleri frame boyutuna genişletme

Responsive Davranış (Resizing)

Auto Layout'un en güçlü özelliği elementlerin boyutlandırma davranışlarıdır:

Hug Contents (İçeriği Sarmala)

Frame, içindeki elementlerin boyutuna göre küçülür/büyür:

Örnek: Buton içindeki yazı uzadığında buton genişler
"Kaydet" → "Değişiklikleri Kaydet"

Fill Container (Konteyneri Doldur)

Element, parent frame'in tüm alanını kaplar:

Örnek: Input field, parent container'ın tüm genişliğini alır

Fixed (Sabit)

Element boyutu değişmez:

Örnek: Avatar resmi her zaman 40x40px kalır

Minimum/Maximum Boyutlar

Element için alt ve üst limitler:

Örnek: Buton minimum 80px, maximum 200px genişlikte olabilir

Nested Auto Layout (İç İçe Layout)

Auto Layout'un gerçek gücü, birden fazla layout'u iç içe kullanmakta ortaya çıkar:

Örnek: Card Component Structure

card (Vertical Auto Layout)
├── card-image (Fixed height: 200px)
├── card-content (Vertical Auto Layout, Hug Contents)
│   ├── card-title (Hug Contents)
│   ├── card-description (Fill Container)
│   └── card-actions (Horizontal Auto Layout)
│       ├── button-like (Hug Contents)
│       └── button-share (Hug Contents)

Bu yapıda:

  • İçerik değiştiğinde card otomatik büyür/küçülür
  • Butonlar yatay sıralanır
  • Açıklama metni card genişliğini kaplar

📚 Layer İsimlendirme: Semantic layer isimlendirme için → BEM Naming Convention

Auto Layout ile Component Geliştirme

✅ İdeal Kullanım Alanları:

  • Button Components: Metin uzunluğuna göre genişleyen butonlar
  • Card Components: İçeriğe göre boyutlanan kartlar
  • List Items: Dinamik içerikli liste öğeleri
  • Form Elements: Responsive form düzenleri
  • Navigation: Mobil/desktop uyumlu menüler

🚀 Tasarımcı İçin Faydalar:

  • İçerik değiştiğinde manuel düzenleme gerektirmez
  • Tutarlı boşluklar ve hizalama
  • Dil değişikliklerinde otomatik uyum
  • Farklı cihaz boyutlarına kolay adaptasyon

💻 Developer İçin Faydalar:

  • Figma'daki layout CSS Flexbox/Grid'e birebir çevirebilir
  • Responsive davranış kodda aynı mantıkla uygulanır
  • Container queries ve modern CSS özellikleriyle uyumlu

Auto Layout Best Practices

🎯 Organize Etme Stratejisi:

  1. Semantic isimlendirme kullanın:

    • header-navigation vs Frame 427 ❌
    • button-primary vs Rectangle 12 ❌

  2. Semantic Hierarchy oluşturun:

    page-container (Vertical)
├── header (Horizontal)
├── header-logo
├── header-navigation
├── header-nav-item-home
├── header-nav-item-about
├── main-content (Vertical)
│   ├── section-title (Hug Contents)
│   └── content-grid (Grid)
└── footer (Horizontal)

📚 Naming Convention: Detaylı layer isimlendirme rehberi → BEM Naming Convention

  1. Tutarlı spacing sistemi:
    • 4px, 8px, 12px, 16px, 24px, 32px
    • Variables ile tanımlayın

💡 Layout Optimization:

  • Layer'ları anlamlı isimlendirin
  • Auto Layout direction'larını mantıklı kullanın
  • Spacing değerlerini tutarlı tutun
  • Unnecessary frames'leri temizleyin
  • Grouping'i anlamlı yapın

Ignore Auto Layout

Bazı elementlerin Auto Layout akışının dışında kalması gerekebilir:

  • Overlay elementler: Tooltip'ler, dropdown'lar
  • Floating elementler: FAB butonları, close ikonları
  • Absolute positioned elementler: Özel konumlandırma gereken öğeler

Kullanım: Element seçili → Properties panel → Ignore auto layout ✅

Auto Layout Ekleme Yöntemleri

Manuel Auto Layout Ekleme

Frame veya elementleri seçtikten sonra:

  • Kısayol: Shift + A
  • Sağ panel: Auto Layout butonuna tık
  • Right-click: "Add auto layout" seçeneği

Auto Layout Ekleme Interface Auto Layout ekleme interface'i ve seçenekleri

🚀 Suggest Auto Layout (Güçlü Özellik)

Suggest Auto Layout karmaşık tasarımları otomatik olarak analiz ederek en uygun Auto Layout yapısını önerir:

Suggest Auto Layout Demo Suggest Auto Layout ile mobil ekran otomatik olarak organize ediliyor

Ne Zaman Kullanılır:

  • Mevcut tasarımları responsive hale getirmek
  • Karmaşık layout'ları hızlıca organize etmek
  • Component'leri Auto Layout'lu hale çevirmek
  • Static tasarımları dynamic yapıya dönüştürmek

Nasıl Kullanılır:

  1. Klavye kısayolu:
    • Mac: Ctrl + Shift + A
    • Windows: Ctrl + Alt + Shift + A
  2. Right-click menü: "More layout options" → "Suggest auto layout"
  3. Actions menu: "Suggest auto layout" seçeneği

Best Practices:

  • Orta karmaşıklıktaki tasarımlar için ideal (card'lar, navigation bar'lar, mobil ekranlar)
  • Çok büyük tasarımlar için bölüm bölüm uygulayın
  • Sonuç olarak oluşan nested frame'leri kontrol edin
  • Layer panel'de mavi nokta ile işaretlenen yeni Auto Layout frame'leri inceleyin

Alignment ve Spacing Kontrolü

Alignment Options

Auto Layout frame'lerinde 9 farklı hizalama seçeneği bulunur:

Alignment Options Demo Auto Layout alignment seçeneklerinin interactive demo'su

Alignment Box Kullanımı:

  • Arrow keys: Farklı alignment'lar arasında geçiş
  • W/A/S/D: Kenarlara hızlıca hizalama
  • B: Baseline alignment toggle
  • X: Gap between Auto/Fixed toggle

Gap Between Auto vs Fixed

Gap Between Auto Example Gap Between Auto özelliği ile elementler arası dinamik boşluk

Auto Mode:

  • Elementler mümkün olan en geniş aralıkta dağılır
  • Web sitesinde de otomatik boşluk dağılımı yapar
  • Responsive tasarımlarda ideal

Fixed Mode:

  • Sabit piksel değeri ile boşluk
  • Tutarlı spacing gereken tasarımlar için

Advanced Padding Kontrolü

Padding Controls Demo Auto Layout padding kontrollerinin detaylı kullanımı

Padding Yöntemleri:

  1. Canvas Handle'ları: Pembe handle'ları sürükleyerek
  2. Keyboard Modifiers:
    • Option/Alt + Drag: Karşıt tarafları aynı anda
    • Option/Alt + Shift + Drag: Tüm kenarları aynı anda
  3. Panel Controls: Sağ panelden sayısal değer girişi
  4. Hızlı Giriş: Command/Ctrl + Click ile direkt değer girişi

Detaylı Bilgi

Daha detaylı bilgi için resmi Figma dokümantasyonunu inceleyin:

Video Tutorial: Figma YouTube Auto Layout Playlist üzerinden comprehensive tutorial'lara erişebilirsiniz.

🎥 Auto Layout Video Eğitimleri

Auto Layout in Figma

Everything You Need to Know About Auto Layout

Playground Files:

Auto Layout responsive behavior

Tasarım Temizliği

Neden Temizlik Önemli?

Tasarım temizliği, AI ve developer'ların tasarımınızı doğru anlayabilmesi için kritik öneme sahiptir. Gereksiz elementler, AI context'ini kirletir ve kodlama sürecini yavaşlatır.

Neden Önemli: Temiz bir layer listesi, AI'ın tasarımınızdaki gerçek elementleri anlayarak daha doğru kod üretmesini sağlar. Ayrıca developer'lar tasarımınızı daha hızlı anlayıp implementasyona başlayabilir.

Temizlenecek Elementler

Hemen Silinmesi Gerekenler:

  • Görünmez layer'lar: Opacity %0 olan elementler
  • Gizli elementler: Visible tiki kaldırılmış layer'lar
  • Boş gruplar: İçinde hiçbir şey olmayan frame'ler
  • Test elementleri: "Deneme", "Test", "Copy" içeren layer'lar
  • Anlamsız isimler: "Rectangle 134", "Frame 92" gibi default isimler
  • Duplicated layer'lar: Aynı elementin birden fazla kopyası
  • Transparan rectangles: Arka plan için kullanılan gereksiz şekiller

Gereksiz Element Örnekleri:

❌ Temizlenmesi Gerekenler:
├── Rectangle (Opacity: 0%)
├── Frame 427 (Boş grup)
├── Text Copy Copy (Duplike)
├── Ellipse 23 (Anlamsız isim)
├── Test Background (Test elementi)
├── Hidden Layer (Gizli)
└── Rectangle 2 (Gereksiz transparan)

Layer Sıralaması

Doğru layer sırası = Sayfadaki görünme sırası

✅ İdeal Layer Sıralaması:

Website Page:
├── 🎨 Overlays (En üstte - modal, toast)
│   ├── modal-overlay
│   └── notification-toast
├── 📋 Header (Sayfanın üstü)
│   ├── header__logo
│   ├── header__navigation
│   └── header__actions
├── 🏠 Main Content (Ana içerik)
│   ├── hero-section
│   ├── features-section
│   └── testimonials-section
├── 🦶 Footer (Sayfanın altı)
│   ├── footer__links
│   └── footer__copyright
└── 🎨 Background (En altta)
    └── page-background

❌ Kötü Layer Sıralaması:

❌ Karışık Sıralama:
├── Footer Link
├── Header
├── Random Rectangle
├── Some Content
├── Background
├── Navigation
├── Footer
└── Header Logo

Sorun: Bu karışık sıralama developer'ın tasarımı anlamasını zorlaştırır ve implementasyon sırasında elementleri bulmasını güçleştirir.

Anlamlı Gruplama Stratejileri

Auto Layout ile Semantic Gruplama:

header (Auto Layout Horizontal)
├── header-brand-section (Auto Layout Horizontal)
│   ├── header-logo
│   └── header-company-name
├── header-navigation (Auto Layout Horizontal)
│   ├── nav-item-home
│   ├── nav-item-about
│   └── nav-item-contact
└── header-actions (Auto Layout Horizontal)
    ├── header-search
    └── header-user-menu

Component Instance Gruplama:

product-listing (Auto Layout Vertical)
├── listing-header
│   ├── listing-title
│   └── filter-button
├── listing-grid (Auto Layout Grid)
│   ├── product-card (Component Instance)
│   ├── product-card (Component Instance)
│   └── product-card (Component Instance)
└── listing-pagination
    ├── pagination-prev
    └── pagination-next

💡 Gruplama İpuçları:

  • İlgili elementleri aynı grup altında toplayın
  • Auto Layout kullanarak gruplama yapın
  • Semantic isimlendirme ile hiyerarşi oluşturun
  • Component'leri mantıklı şekilde organize edin

📚 Naming Convention: Detaylı layer isimlendirme sistemi → BEM Naming Convention

Temizlik Sonrası Faydalar:

  • 🔍 Kolay arama: Layer'ları hızlıca bulma
  • 🎯 AI için net context: Gereksiz elementler yok
  • ⚡ Developer speed: Tasarımı hızlı anlama
  • 🧹 Kolay güncelleme ve bakım

Unutmayın: Temiz tasarım = Hızlı kodlama! Her gereksiz element, AI ve developer'ı yavaşlatır.

Referans Linkler