Figma’da Tasarım Sisteminden İlk Ekranlara | Dur Bi’ Bakalım #04

Tasarım sistemini kurduk. Peki renkleri, ikonları ve bileşenleri gerçek uygulama ekranlarına nasıl taşıyoruz? Dur Bi’ Bakalım’ın 4. bölümünde Melike Erkan ve Uğur Anlak olarak Doodle projesinin Figma tasarım sistemini inceliyor, ilk onboarding ekranlarını bu sisteme bağlamaya başlıyoruz. İlk kez tasarım sistemi oluştururken yaşanan zorlukları, aldığımız kararları ve süreçte öğrendiklerimizi paylaşıyoruz. Bu bölümde: • Core ve semantik renkler, token yapısı ve light/dark mode hazırlığı • Codex ve Figma MCP ile tasarım sistemini düzenlemek • Maskot varyantlarında boyut ve görsel tutarlılık • Base icon yapısı ve ikon boyutlarını tek yerden yönetmek • Buton, input ve diğer arayüz bileşenleri • Benchmark, renk hiyerarşisi ve onboarding kararları • Figma kütüphanesini uygulama dosyasına bağlamak ve güncellemek BÖLÜMLER 00:00 Bu bölümde neler var? 01:35 Tasarım dosyaları ve kapak düzeni 03:08 İlk tasarım sistemini oluşturmak 05:34 Core ve semantik renkler, token yapısı 11:19 Maskot varyantlarında tutarlılık 14:09 İkon sistemi ve boyut yönetimi 18:23 Bileşenler ve Codex ile düzenleme 21:43 İlk ekranlar, benchmark ve renk kararları 24:38 Onboarding ve tasarım sistemi bağlantısı 26:16 Onboarding için semantik renk tanımlamak 29:30 Native arayüz öğeleri ve kütüphane güncellemeleri 33:35 Görsel dil ve bileşen yapısını genişletmek 35:33 Sonraki bölümde neler var? Sen tasarım sistemini ekranlara taşırken en çok nerede zorlanıyorsun: renk tokenlarında mı, bileşenlerde mi, kütüphane yönetiminde mi? Yorumlarda konuşalım. Önceki bölümler: #01 — Bir Tasarıma Nereden Başlanır?    • Bir Tasarıma Nereden Başlanır? Gerçek UI/U...   #02 — AI ile Tasarım Sürecindeki Eksikleri Nasıl Bulduk?    • AI ile Tasarım Sürecindeki Eksikleri Nasıl...   #03 — Kullanıcı Testi ve Tasarım Sistemi    • Kullanıcı Testi ve Tasarım Sistemi | Dur B...   Gerçek tasarım sürecini birlikte takip etmek için kanala abone ol. #DurBiBakalım #Figma #TasarımSistemi