• Buradasın

    Figma

    Özetteki ilgi çekici içerikler

    • Adobe XD Programı Tanıtımı

      Bu video, Ramazan Güler tarafından sunulan bir eğitim içeriğidir. Ramazan Güler, Adobe XD programı hakkında bilgi vermektedir. Video, Adobe XD programının ne işe yaradığını ve önemini anlatmaktadır. Adobe XD, tasarım ve prototype oluşturma amacıyla tasarlanmış bir programdır. Program, tasarımın nasıl çalıştığını canlı olarak göstermeyi sağlar ve HTML/CSS dökümünü kolayca alabilmeyi sağlar. Ramazan Güler, programın kullanımını adım adım göstererek, özellikle step wizard animasyonu örneği üzerinden nasıl çalıştığını açıklar. Ayrıca, Adobe XD'nin alternatif olarak Figma ve Prototip gibi internet siteleri de tanıtılmaktadır.

      • youtube.com

    • Figma Temel Eğitim Videosu

      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.

      • youtube.com

    • Figma'da SVG Dosyası İçe Aktarma Rehberi

      Bu video, bir eğitim içeriği olup, izleyicilere Figma uygulamasında SVG dosyası içe aktarma sürecini adım adım göstermektedir. Video, Figma'a giriş yapma veya hesap oluşturma adımlarıyla başlayıp, yeni tasarım oluşturma sürecini anlatmaktadır. Ardından, "Good the back" seçeneğine tıklayarak import seçeneğine ulaşma ve SVG dosyasını içe aktarma adımları gösterilmektedir. Kullanıcılar hem dosya seçerek hem de yerel diskten sürükleyerek SVG dosyalarını Figma projelerine ekleyebilirler.

      • youtube.com

    • Kariyer.net Web Sitesi Tasarım Analizi ve Figma ile Redesign

      Bu video, Ender adlı bir tasarımcı ve bir tiyatrocu arasında geçen, Kariyer.net web sitesinin tasarımını inceleyen ve eleştiren bir eğitim içeriğidir. Videoda Kariyer.net'in 2008 ve 2015 yılları arasındaki tasarım değişiklikleri Web Arşiv (Wayback Machine) kullanılarak karşılaştırılmakta, CSS kodları ve tasarım özellikleri detaylı olarak ele alınmaktadır. Konuşmacılar, pop-up menülerin kayması, renk kullanımı, font boyutları, görsel kalitesi ve responsive tasarım eksiklikleri gibi teknik hataları göstermekte ve bu hataları düzeltmek için Figma programında yeni bir tasarım planı sunmaktadır. Videoda ayrıca kariyer sitelerinin genellikle karmaşık ve kullanıcı dostu olmayan yapısı ele alınmakta, tasarım sisteminin oturtulması için gerekli süre açıklanmaktadır. Konuşmacı, bir sonraki videoda renk seçimi, font seçimi ve font boyutu gibi temel tasarım prensiplerini anlatarak sıfırdan bir ana sayfa tasarımı yapacağını belirtmektedir.

      • youtube.com

    • Figma'da Constraints Kullanımı Eğitimi

      Bu video, Figma uygulamasında constraints özelliğinin nasıl kullanılacağını gösteren bir eğitim içeriğidir. Eğitmen, Figma'da responsive design yaparken constraints'in önemini vurgulamaktadır. Video, constraints'in menülerde, footerlarda ve content box'larda nasıl kullanılacağını adım adım göstermektedir. Eğitmen önce basit bir menü örneği üzerinden constraints'in temel kullanımını anlatıp, ardından daha karmaşık bir tasarım üzerinde master components üzerinden constraints ayarlarını göstermektedir. Ayrıca, yazıların alt satıra atılmaması gerektiği gibi önemli püf noktalarını da paylaşmaktadır. Video, constraints'in responsive design için çok önemli bir araç olduğunu vurgulayarak sonlanmaktadır.

      • youtube.com

    • Figma'da Animasyon Oluşturma Eğitimi

      Bu video, Ender adlı bir eğitimcinin Figma programında animasyon oluşturma konusunda sunduğu bir eğitim serisinin ilk bölümüdür. Ender, izleyicilerin yorumlarda belirttikleri animasyonları da bu seriye ekleyeceğini belirtiyor. Videoda, Figma'da pin animasyonu oluşturma süreci adım adım gösterilmektedir. Ender önce pin tasarımının nasıl oluşturulacağını, ardından bu tasarımın prototip olarak nasıl kullanılacağını ve animasyonun nasıl çalıştığını detaylı şekilde anlatıyor. Animasyonun çalışması için komponentlerin isimlerinin aynı olması gerektiği gibi teknik detaylar da paylaşılıyor. Video, Figma'da animasyon oluşturma konusunda temel bilgi edinmek isteyenler için faydalı bir kaynak niteliğindedir.

      • youtube.com

    • Figma Tasarımlarını Bold'a Aktarma ve Kodlama Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Figma tasarımlarını Bold platformuna aktarma ve kodlama sürecini adım adım göstermektedir.. Video, iki ana bölümden oluşmaktadır. İlk bölümde Figma tasarımlarının Bold'a nasıl aktarılacağı ve bu tasarımların kodlanarak nasıl kullanılacağı anlatılmaktadır. İkinci bölümde ise Bolt adlı AI kodlama aracının diğer benzer araçlardan farklı olarak daha iyi performans gösterdiği vurgulanmaktadır.. Videoda bir mail uygulaması örneği üzerinden, Figma tasarımlarının Bold'a aktarıldıktan sonra nasıl geliştirilebileceği ve AI'nin tasarımlara göre özellikler ekleyebildiği gösterilmektedir. Konuşmacı, tasarımcıların Figma'daki çalışmalarını hızlıca kodlayarak projelerine entegre etmelerine yardımcı olacak bir rehber sunmaktadır.

      • youtube.com

    • Figma Mirror Uygulaması Kullanım Rehberi

      Bu video, bir eğitim içeriği olup, konuşmacı Figma Mirror uygulamasının nasıl kullanılacağını göstermektedir. Video, Figma Mirror uygulamasının telefonuna yüklendikten sonra nasıl kullanılacağını adım adım anlatmaktadır. Önce uygulamanın açılış ekranı ve frame/komponent seçimi gösterilmekte, ardından aynı WiFi ağına bağlanarak uygulamanın nasıl kullanılacağı açıklanmaktadır. Son olarak, prototip geliştirme örneği üzerinden bir frame'e özellik ekleme ve tıklama ile otomatik yönlendirme işlemi gösterilmektedir.

      • youtube.com

    • Figma'da İnteraktif Komponent Kullanımı

      Bu video, bir eğitim içeriği olup, konuşmacı Figma'daki yeni interaktif komponent özelliğini anlatmaktadır. Video, Figma'daki interaktif komponent özelliğinin ne olduğunu ve nasıl kullanılacağını adım adım göstermektedir. Konuşmacı önce prototip özelliğinin sınırlamalarını anlatarak başlıyor, ardından interaktif komponent özelliğinin sunduğu avantajları açıklıyor. Buton örnekleri üzerinden hover efekti, click efekti ve toggle gibi interaktif özelliklerin nasıl oluşturulacağını gösteriyor. Bu özellik sayesinde Figma'da sayfa içindeki küçük animasyonlar ve interaktif elemanlar oluşturulabiliyor, böylece prototipler daha gerçekçi hale geliyor.

      • youtube.com

    • Figma Eğitim Tanıtımı

      Bu video, bir eğitmen tarafından sunulan Figma tasarım programı hakkında bir eğitim tanıtımıdır. Eğitim, Figma programını sıfırdan ileri seviyeye kadar yaklaşık yedi hafta sürecek şekilde kapsamlı bir şekilde ele alacaktır. Eğitimin temel seviyeden başlayacağı, tüm katılımcıların gönül rahatlığıyla kayıt olabileceği belirtilmektedir. Eğitimin ilerleyen aşamalarında UI prensipleri baz alınarak bir proje hayata geçirilecek ve tasarım tamamlandıktan sonra front-end ekibine veya programcıya nasıl teslim edileceği konusunda bilgi verilecektir.

      • youtube.com

    • Figma ile Tablet Responsive Web Sayfası Tasarımı Eğitimi

      Bu video, Ender adlı bir eğitmen tarafından sunulan Figma uygulamasında tablet responsive web sayfası tasarımı eğitimidir. Eğitmen, Coin sayfasının tablet versiyonunu sıfırdan oluşturma sürecini adım adım göstermektedir. Video, grid sistemi oluşturma, ekran boyutlarına göre düzenleme, logo yerleştirme, banner düzenleme, içerik alanlarını düzenleme, menü tasarımı ve prototip oluşturma gibi konuları kapsamaktadır. Eğitmen, iPad Mini ve iPad Pro gibi farklı cihaz boyutlarında tasarımın nasıl görünmesi gerektiği üzerinde durmakta ve Figma'nın otomatik boyutlandırma özellikleri ile animasyon ekleme tekniklerini göstermektedir. Eğitim serisi, bir sonraki bölümde telefon tasarımı yapılacağını belirterek sona ermektedir. Video boyunca, tasarımın en küçük cihazda nasıl göründüğünü kontrol etmenin önemi vurgulanmakta ve kullanıcı deneyimi için parmak mesafesi gibi detaylar açıklanmaktadır.

      • youtube.com

    • Sıfırdan Web Sitesi Tasarımı Eğitimi

      Bu video, "The Code Father" tarafından sunulan bir web tasarım eğitim serisinin ilk bölümüdür. Eğitmen, Samsun'da yaşayan ve Ladik Akdağ Kayak Merkezi için bir web sitesi tasarlamayı amaçlayan bir eğitimci olarak kendini tanıtmaktadır. Video, web sitesi tasarımının temel aşamalarını göstermektedir. Eğitmen, Figma programını kullanarak bir web sitesi tasarımı yapmaktadır. İlk olarak Figma'da yeni bir dosya oluşturma, grid ekleme ve çalışma alanını ayarlama adımlarını göstermektedir. Ardından, Ladik Akdağ Kayak Merkezi için bir web sitesi tasarımı yaparak header (üst navigasyon barı) oluşturma, logo yerleştirme, menü oluşturma ve hizalama gibi temel tasarım unsurlarını adım adım anlatmaktadır. Bu eğitim serisi, web sitesi tasarımı, HTML, CSS, JavaScript ile front-end programlama, My Secure Database ve PP ile backend programlama olmak üzere dört bölümden oluşmaktadır.

      • youtube.com

    • Figma ile Web Tasarım Eğitimi

      Bu video, bir eğitmen tarafından sunulan Figma ile web tasarım eğitimidir. Eğitmen, Figma'nın temel özelliklerini ve web tasarım inceliklerini anlatmaktadır. Video, Figma'nın tanıtımıyla başlayıp, aracın arayüzünü (toollar, katmanlar, sayfalar, komponentler ve özellikler paneli) açıklamaktadır. Ardından eğitmen, Dribble'dan Twitter için bir tasarım bulup, bu tasarımın Figma'da nasıl komponentler halinde oluşturulacağını adım adım göstermektedir. Özellikle logo, menü ve tweet butonu gibi öğelerin nasıl tasarlanacağı ve komponent haline getirileceği detaylı olarak anlatılmaktadır.

      • youtube.com

    • Figma'da Dosyaları Bilgisayara Kaydetme Rehberi

      Bu video, bir eğitim içeriği olup, izleyicilere Figma uygulamasında dosyaları bilgisayara nasıl kaydedebileceklerini göstermektedir. Video, Figma'nın varsayılan olarak bulutta dosyaları tuttuğunu ancak bazı durumlarda bilgisayara kaydetme ihtiyacı olabileceğini açıklıyor. İki farklı yöntem sunuluyor: File menüsünden "Save to Local" seçeneğini kullanma veya Ctrl+P tuşlarına basarak hızlı menüyü açıp "Save to Local Copy" yazarak dosyayı kaydetme. Ayrıca, kaydedilen dosyanın mail atılabileceği veya USB aracılığıyla paylaşılabileceği belirtiliyor.

      • youtube.com

    • Cloud Talk to Figma MCP Sunucu Kullanım Rehberi

      Bu video, bir kişinin Cloud Talk to Figma MCP sunucusunun nasıl kurulacağını ve kullanılacağını adım adım gösterdiği bir eğitim içeriğidir. Konuşmacı, kendisinin tasarımcı olmadığını belirterek, bu aracın potansiyelini vurgulamaktadır.. Video, Cloud Talk to Figma MCP sunucusunun kurulum aşamalarını detaylı şekilde göstermektedir. Önce sunucunun kurulumu, ardından Figma'ya eklenti ekleme, Cloud Desktop'a eklenti yükleme ve Figma ile bağlantı kurma adımları anlatılmaktadır. Daha sonra, sunucu ile Figma arasında iletişim kurarak mevcut bir tasarımın zaman takibi yerine invoicing aracı olarak değiştirilmesi ve yeni bir dashboard tasarımı oluşturma örnekleri gösterilmektedir. Konuşmacı, bu aracın özellikle prototip oluşturma ve tasarım için kullanılabileceğini belirtmektedir.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor