Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Fikret Re-Design tarafından sunulan kapsamlı bir Figma eğitim dersidir. Fikret, Re-Design kanalının sahibi olarak Figma programının temel özelliklerini adım adım anlatmaktadır.
- Video, Figma'nın ne olduğu, hesap oluşturma ve giriş yapma adımlarıyla başlayıp, programın arayüzü, araç paneli ve temel araçları (Move, Scale, Frame, Shape araçları) detaylı şekilde göstermektedir. Ardından hizalama özellikleri, element özellikleri, layer ayarları ve renk paleti oluşturma gibi temel konular ele alınmaktadır. Son bölümde ise prototip oluşturma, sayfa geçişleri, animasyonlar ve kısıtlamalar (constraints) özellikleri bir e-ticaret teması örneği üzerinden pratik uygulamalarla anlatılmaktadır.
- Video, Figma Desktop uygulamasının nasıl indirileceği, farklı tarayıcılardan tasarımın nasıl paylaşılacağı, komponent kavramının önemi ve responsive tasarım için kısıtlamaların nasıl kullanılacağı gibi pratik bilgiler de içermektedir. Bu eğitim, Figma kullanarak tasarım yapmak isteyenler için temel bir rehber niteliğindedir.
- 00:22Figma Tanıtımı
- Figma, online olarak çalışan bir tasarım aracıdır ve ayrıca programı indirebilirsiniz, ancak çevrimdışı çalışmaz.
- Tasarımcılar için ücretsiz kullanılabildiği gibi, şirketler için ücretli olarak da sunulmaktadır.
- Figma'da giriş yapmak için Google hesabı kullanabilirsiniz.
- 01:32Figma Arayüzü
- Figma'da resent dosyalar, taslaklar, pluginler ve silinen dosyalar gibi menüler bulunmaktadır.
- Profil menüsünden profil detaylarını değiştirebilir, search kısmından en son açtığınız dosyaları bulabilirsiniz.
- Artı ikonu yeni dosya açmanıza, yanındaki ikon ise başka bir tasarım aracından tasarım almanıza olanak tanır.
- 02:39Tasarım Arayüzü
- Yeni dosya açıldığında sol tarafta layers paneli, sağ tarafta özellikler paneli, yukarıda tools paneli ve menü paneli bulunur.
- Sağ üst köşede profil resmi, tim paylaşımı, önizleme ve yakınlaştırma/uzaklaştırma butonları yer alır.
- Tasarımın ortasında isim değiştirme, versiyon history ve silme tuşları bulunmaktadır.
- 03:50Tools Paneli
- Sol üst köşedeki tools panelinde seçim aracı, büyütüp küçültme aracı, artboard aracı ve seçim şef araçları bulunur.
- Dışarıdan resim getirme, serbest seçim aracı (vektör aracısı), yaz aracı ve yorum yapma butonları mevcuttur.
- Sağ alt köşedeki soru işareti kısmında yardım menüleri, video tutoriallar ve klavye kısayol tuşları bulunmaktadır.
- 05:08Figma Desktop Uygulaması
- Figma ile alakalı tasarım yapmak için sol tarafta menüler kısmından Get Dext app uygulamasını indirmeniz gerekiyor.
- İndirilen program kurulum yapmadan direkt açılabilecek portable bir kurulumdur.
- Desktop uygulaması da tarayıcı arayüzüyle aynı görünüme sahiptir ve online olarak çalışır.
- 06:53Figma'da Ekip Çalışması
- Figma'da aynı tasarım birden fazla cihazdan veya kullanıcıdan görüntülenebilir ve değiştirilebilir.
- Farklı tarayıcılardan veya kullanıcılar aynı tasarım üzerinde çalışabilir ve değişiklikler gerçek zamanlı olarak görüntülenebilir.
- Ekip üyeleri tasarımın üzerinde müdahale edebilir ve değişiklik yapabilir.
- 10:40Frame ve Platformlar
- Tools panelinde frame sekmesine tıklandığında sağ tarafta platformlar açılır.
- Platformlar arasında iPhone ve Google Android telefon modellerinin boyutları bulunmaktadır.
- Frame'e tıklandığınızda sol tarafa layers panelinde frame'in adı çıkar ve bu adı değiştirebilirsiniz.
- 11:24Figma'da Araç Paneli
- Araç panelinde Move aracı, taşıma ve kopyalama işlemleri için kullanılır ve klavyedeki kısayol tuşlarıyla farklı işler yapılabilir.
- Scale aracı, artboard'un boyutunu değiştirmeden responsive olarak büyüme ve küçültme sağlar, Move aracıyla yapılan dönüşüm serbest olurken Scale daha güçlüdür.
- Shape araçları arasında Rectangle (kare/dikdörtgen), Line (çizgi), Arrow (ok), Ellipse (elips), Polygon (çokgen) ve Star (yıldız) araçları bulunmaktadır.
- 12:39Shape Araçlarının Özellikleri
- Rectangle aracıyla çizilen şekillerin köşelerinde yuvarlaklar oluşur ve bu yuvarlakları birbirine doğru çekerek kareyi yuvarlak hale getirebilirsiniz.
- Ellipse aracı, Figma'da çok güçlü bir özelliktedir; ortadaki noktayı oynayarak açıları değiştirerek ve yuvarlakları hareket ettirerek farklı şekiller oluşturabilirsiniz.
- Polygon ve Star araçlarında da benzer şekilde yuvarlakları hareket ettirerek şekillerin kenarlarını yumuşatıp kalınlaştırabilirsiniz.
- 16:20Diğer Araçlar ve Özellikler
- Image aracı, bilgisayardaki resimleri eklemeye yarar ve Shift tuşu basılı tutulduğunda resimler düzgün bir biçimde büyümeye devam eder.
- Vector aracı serbest çizim yapmanıza olanak sağlar ve bu araçta noktalar bağımsız olarak çalışabilir, isolation modlarına girerek renk ayarları yapılabilir.
- Text aracıyla yazı yazabilir, sağ tarafta font family, font size, font weight gibi ayarları değiştirebilir ve Command kısmından tasarım hakkında yorum yapabilirsiniz.
- 19:18Figma'da Komponentler
- Figma'da komponent kavramı çok önemlidir ve diğer tasarım araçlarında bileşen veya sembol olarak adlandırılır.
- Komponentler, tasarımda tekrarlanan öğeleri hızlı ve işlevsel bir şekilde kullanmayı sağlar.
- Komponent haline getirilen bir öğenin özelliği değiştirildiğinde, tüm tasarımda aynı komponentin özelliği de otomatik olarak değişir.
- 22:56Figma'da Hizalama Özellikleri
- Figma'da hizalama özellikleri Properties penceresinin en üstünde bulunmaktadır ve frame'e göre hizalama yapılabilir.
- Tek bir elemanı frame'e göre hizalamak için center, left, right, top, bottom seçenekleri kullanılabilir.
- Birden fazla elemanı birbirlerine göre hizalamak için align özellikleri kullanılarak solda, ortada, sağda, en üstte veya en altta konumlandırılabilir.
- 26:19Elemanların Sıralanması ve Özellikleri
- Distribüt özellikleri ile elemanların birbirine göre yatayda ve dikeydeki uzaklıkları ayarlanabilir.
- Elemanların sıralarını değiştirmek için yuvarlağı çekip diğer elemanın üzerine bırakmak yeterlidir.
- Elemanlar arasındaki mesafeyi azaltıp çoğaltmak için çizgi kullanılır.
- 27:28Özellikler Penceresi ve Eleman Ayarları
- Özellikler penceresinde elemanın konumu (position), genişlik (width) ve yükseklik (height) değerleri görüntülenir ve ayarlanabilir.
- Elemanın açısal döndürme değerleri de bu pencerede değiştirilebilir.
- Layer kısmında Photoshop'taki gibi layer özellikleri bulunur ve resimlerin kontrastı ile diğer özelliklerini oynayarak farklı bir adjustment yapılabilir.
- 29:47Fiil ve Kenarlık Özellikleri
- Fiil özelliği ile elemanın dolgu rengi değiştirilebilir ve solid, linear, radyal, angular, diamond veya imaj seçilebilir.
- Kenarlık (border) özelliği ile elemanın kenarlığı eklenip, kalınlığı ayarlanabilir ve kenarlığın şekli (round, square) değiştirilebilir.
- Elemana shadow, inner shadow, blur ve background efektleri eklenebilir ve export özelliği ile PNG formatında çıktı alınabilir.
- 32:31Prototype ve Kod Özellikleri
- Özellikler panelinde prototype ve kod özellikleri bulunur, kod kısmı CSS özelliklerinin kodlarını gösterir.
- Kodlar genellikle position absolute olarak uygulandığı için pek kullanışlı değildir.
- Prototype kullanabilmek için en az iki artboard olması gerekir ve prototype'ın mantığını kavramak için iki artboard arasında bağlantı kurulabilir.
- 34:25Figma'da Prototip Oluşturma
- Figma'da prototip oluşturmak için bir yuvarlağı seçip "on top" seçeneğini belirleyerek başka bir sayfaya geçiş sağlayabilirsiniz.
- "Smart animation" özelliği, sayfadan ayrılmadan kendi içerisinde animasyon oluşturmanızı sağlar.
- Figma'da prototip kısmı zamanla geliştirilmiş ve daha fazla özellik kazanmıştır.
- 36:20Kısıtlamalar (Constraints) Kullanımı
- Kısıtlamalar (constraints), tasarımın farklı cihazlarda (iPhone, iPad, Mac) nasıl görünmesini sağlar.
- Butonlar, inputlar gibi elemanların left, right, top ve bottom kısıtlamaları ayarlanarak responsive tasarım oluşturulabilir.
- Elemanların sabit kalmasını istiyorsanız left ve top kısıtlamalarını sabit tutabilirsiniz.
- 39:29Prototip Önizlemesi ve Etkileşimler
- Prototip önizlemesi, tasarımı canlı denemek için kullanılır ve Figma'da oldukça gelişmiş bir özellik sunar.
- Üst ve alt barları sabit tutmak için "fix position" ve "screen" seçenekleri kullanılır.
- Etkileşimler (interactions) oluşturarak sayfalar arasında geçiş sağlayabilir ve animasyonlar ekleyebilirsiniz.
- 41:41Prototip Oluşturma Örneği
- İki sayfayı birbirine bağlamak için prototip kısmından sayfaları sürükleyebilirsiniz.
- Animasyon seçeneği ile sayfalar arası geçiş animasyonları ekleyebilirsiniz.
- "Back" butonu ile geri dönüş yapmak için "on top" ve "back" seçenekleri kullanılabilir.