Figma Dersleri - Bölüm 5 - Auto Layout

[@aydns7]

dostlar çok güzel kaliteli bir içerik oluşturmuşsunuz. Umarım devam edersiniz, muhabbetler gerçekten güzel.

[@elifagrtas7762]

ya siz nasıl güzel ders anlatmışsınız öyle :) valla güle eğlene dersin başına oturuyorum :) emeğinize sağlık

[@fatihdemirkan4906]

Gerçekten Figmayı diğer programlardan ayıran en güzel özellik bu olmuş, benim de bu programa geçme sebebim, gerçekten güzel özellik.

[@endertopaloglu]

Componentlerle birlikte kullanınca diğer programların yüzüne bile bakasın gelmiyor :)

[@renasozmen5782]

Figma zor mu? Mobil uygulama yapıyorum, Figma merakım var ama zaman yok( ne kadar sürede elle tutulur bir iş yapılır acaba? Tşk ederim

[@leylamusazade97]

@@renasozmen5782 Merhaba Figma zor degil ama ozelliklerinin hepsini iyi kavrayabilmek tamamen pratige bagli. Basindan beri yapdigin islerde autolayout component constrains gibi seyleri dikkate alarak yaparsan tasarimini 4-5. tasarimlarinda 70-80 % kavraya bilirsin tahminimce.

[@Kahveci86]

Bu ders biraz zorladı, bol bol pratik yapmak lazım, teşekkürler

[@endertopaloglu]

Figmayı iyi kullanabilmek için bol bol pratik yapmanız gerekiyor :)

[@gulpiriyeva7080]

Hocam emeğinize sağlik. Chok teshekkur ederim. Figmaya yeni gelen ozelliklerden bahs eden video gelir mii🥹

Bu bölümde bayağı kafam karıştı. Tekrar izleyeceğim.

[@musahasanzade811]

Teşekkür ederim her zaman ara sira izliyorum

[@Canwick61]

36:20 Ederiz ederiz teşekkür ederiz iftara on kala Enderun gülüşü :D

[@aliismail8498]

Tebrik ederim çok güzel bir anlatım olmuş. Ayrıca çok teşekkür ederim bu harika içerikler ve dersler için.

[@lamiyaliyeva3654]

Bu dərs sayəsində men fil, hug, fixed contunier oyrendim cok teşekkur ederim.

[@AzizPeder.]

hocam muthis degerli bir icerik gercekten. kıymeti hakettigince bilinmemiş zannımca rakamlara bakınca.. bir konuyu arastirrken hem turkce hem de ustasından birsseyler öğrenmek günümüzde zor çünkü fazlasıyla tecrübe ediyoruz. ben bir eğitim gereği bu konuyu öğrenmek zorunda kaldim su an ancak gördüğüm kadarıyla kayıtlar 2021. büyük oranda farklılıklar yok ancak bazı seyleri göremiyorum Mac desktop uygulaması kullanıyorum. mesela space between göremedim yani packed bolumu görünmüyor bazı seyler sizinkinden farklı su an. bunları baska özelliklerle mi tolere etmişler yoksa ben mi bulamıyorum.

[@dilarakaraaslan7047]

Horizontal gap between kısmını auto yaptığınız zaman aynı şey oluyor.

[@senaroloji]

20.10'da ''nasıl olsa zam gelir'' derken hayatın sizi bu kadar haklı çıkarması için canla başla mücadele edeceğini beklemiyordum :)

[@afafsamo591]

Elmanın 6 tl olduğu zamanlar ! :) ,çok teşekkürler Ender topaloğlu çok anlatıcı olmuş

[@Hhkhxhjiikjndthv]

Çok teşekkür ederim ,hocam.Çok yararlı oldu.Emeğinize sağlık.

[@metinabdullaev5650]

Selam Aleyküm. Teşekkürler bu seri dersler için. Hakkınızı helal edin. İzliyenler için söylüyorum 18:30' larda elma yazısıyla 1 kg yazısını birleştirib ayrı bir konteynırın içine atmak isteyenler iki yazını seçmekte zorluk çekenler onu frameden çıkarıp köşede birleştire bilir fon obje olmamak şartıyla çünkü arkadaki obşe müsade etmez seçmesi için. Kendim bu sorunu yaşadığım, için izleyicilerle de paylaşmak istedim. Umarım anladılar bu profeyonel anlatımımla😂😂

[@photosfromme]

hocam elinize sağlık. emek büyük 👏👏

[@erkamsimsek]

24:30 tam anladım derken öyle bir soru sordu ki soru bankası bildiklerimi unuttum :D teşekkürler S.B

[@hamdidincel5465]

Otomatik düzenleme özellikleri sayesinde tasarımı kolaylaştıran Figma'nın Auto Layout özelliği anlatılıyor. Kullanıcı arayüzü tasarımında dinamik ve esnek bir yapı oluşturmak için farklı kullanım örnekleri gösteriliyor. önemli anlar: 00:00 Eğitim videolarındaki kıyafet değişimi ve Adobe XD'de otomatik hizalama konusunda detaylı bir anlatım yapılmıştır. -Kıyafet değişimi ve çeşitliliği üzerine konuşma. -Adobe XD'de objelerin otomatik hizalanması ve düzenlenmesi. 06:04 Objelerin konumunu ve hizalamasını ayarlamak için Adobe XD'de konteyner alanlarının nasıl kullanıldığı konusunda detaylı bir rehber sunulmaktadır. -Farklı renkler ve mesafelerle objelerin hizalanması -Objelerin otomatik hizalanması ve özelliklerin kullanımı -Konteyner alanlarının genişliği ve içindeki objelerin hizalanması 12:10 Tasarım yaparken konteyner alanları ve objeler arasındaki boşlukları ayarlamak önemlidir. Sabit genişlik ve dinamik yükseklik kullanarak tasarımı kolaylaştırabilirsiniz. -Konteyner alanları ve objeler arasındaki boşluk ayarlama süreci detaylıca anlatılmaktadır. -Sabit genişlik ve dinamik yükseklik kombinasyonunun tasarıma kolaylık sağladığı vurgulanmaktadır. 18:14 Tasarım esnasında ele alınan konuların detaylı bir şekilde anlatımı yapılmıştır. Tasarım sürecinde renk seçimi, boyutlandırma, konteyner kullanımı ve öğelerin hizalanması gibi konular ele alınmıştır. -Renk seçimi ve değiştirme süreci detaylıca açıklanmıştır. Tasarımın görsel unsurları üzerindeki kontrollü değişiklikler vurgulanmıştır. -Boyutlandırma işlemi sırasında kullanılan teknikler ve pratik bilgiler paylaşılmıştır. Öğelerin boyutları ve aralarındaki mesafeler üzerinde detaylı durulmuştur. -Konteyner kullanımının önemi ve faydaları üzerinde durulmuştur. Öğelerin gruplanması ve hizalanması için konteynerlerin nasıl kullanılabileceği anlatılmıştır. 24:19 Tasarım programında objeleri hızlıca hizalama ve düzenleme yöntemleri detaylı bir şekilde anlatılıyor. Objelerin genişlikleri, yükseklikleri ve sabitlikleri konteynerlara bağlı olarak ayarlanabiliyor. -Objelerin hizalanması ve düzenlenmesi anlatılırken tasarım programındaki pratik kullanımı gösteriliyor. -Objelerin genişlikleri ve yükseklikleri konteynerlara bağlı olarak ayarlanabiliyor, sabit genişlikler ve diğer özellikler kolayca belirlenebiliyor. -Konteynerlara bağlı objelerin sabit genişlikleri ve diğer özellikleri tasarımın genel yapısına uygun şekilde düzenleniyor. 30:24 Tasarım programlarındaki dinamik kullanım alanları ve özelliklerin pratik yaparak öğrenilmesi, özellikle Figma'nın kullanım kolaylığı ve gelişmiş özellikleri vurgulanmıştır. -Tasarım programlarında elementlerin genişlik ve yükseklik ayarlarının nasıl yapılabileceği detaylı bir şekilde anlatılmıştır. -Komponentlerin nasıl kullanılacağı ve tasarım sürecinde nasıl entegre edileceği üzerinde durulmuştur.

[@eceyarentans3362]

İki objeyi shit a dedikten sonra cltrl d yaptığımda malesef yan tarafına duplicatelemiyor. Sadece ctrl ile yazıyı seçip duplicate yapmaya çalıştım gene de olmadı

[@kubrakuscu3932]

Anlatmlar harika ben de yeni baslayanlardanm. Emeginzze saglik ... ama bn bu ozelligi bir turlu kavrayamiyorum her sefernde byerlerde hata yapiyorum ki istedgm olmuyr o baglantyi br turlu tam kuramiyorum 😢 bir videoda da bz sifirdan baslayanlar icin yapilabilecek hatalari cekseniz ve nasil duzeltebilecegmzi muthisss olurdu ❤❤❤❤

[@akhenatontubba9950]

Allah razı olsun 🎉

[@sevdehoo4576]

yaziyi secmek icin cmd tusuna windowsdakiler hangi tusla yapiyor

[@gulsahrmak4648]

Merhabalar. Serileri yaptığınız için teşekkürler. Bir sorum olacak , Hug content ve fill container kısmında fill container kullanımı çok bariz ama biz hug content seçeneğini nerelerde kullanabiliriz? iyi calismalar.

[@aydanmemmedli4112]

Merhaba. Men site üzerinden figmayla çalışıyorum amma bende Resizing bölümü çıkmıyor. Yardımcı ola bilirmisiniz?

[@DogaYildirimli]

space betweeni bulamıyorum

[@tugbaorak9537]

teşekkürler😄

[@batuhancolbay]

Bende Resizing bölümü yok bulamıyorum

[@eminnasibov8931]

Teşekkürler

[@armantkn]

29:31 "ctrl"

[@sevdehoo4576]

cmd tusu hangisi oluyor

[@InciGamze]

Ender Hocam merhabalar, Emeğinize sağlık, çok faydalı bir eğitim serisi olmuş. Küçük bir sorum olacak, kırmızı şekilde pixelleri nasıl görebiliyoruz tasarımda?

[@endertopaloglu]

Merhaba, frame'i seçtikten sonra sağ menüden layout grid oluşturmanız gerekiyor.

[@sadtsalehova7092]

Selam Ender bey ve Soru bankasi. Mən videolarınızı Azərbaycandan izləyirəm. Təşəkkür edirəm bilgilərinizi bizimlə paylaşdığınız üçün. Ben yaptıklarınızın aynısını kendimde kopyaliyorum. Hiç bir detayı kaçırmak istemiyorum. Sorum şu ki, 18:09 - cu saniyede boşluğu nasıl veriyosunuz? Boşluk pikselini kırmızı ile göre biliyorum ancak kırmızı numara ekranda ola-ola küçültüp büyütemiyorum.

[@endertopaloglu]

Merhaba Saadet, yorum için teşekkür ederim. 18.09 da. Bir objeyi seçtikten sonra "Alt" tuşuna basılı tutarsan diğer objelerle arasındaki mesafeyi görebilirsin. Ok tuşlarıyla da kaydırdığında istediğin pozisyona ayarlayabilirsin. Ben de orada alt tuşuna basıp sağ ok tuşuyla 10px boşluk veriyorum 😊. ( Alt tuşuna basıp aynı zamanda shift tuşunada basarak ok tuşuyla objeyi hareket ettirirsinsen 10px'lik kaydırmalar yapabilirsin. Anlamadığın bir yer olursa sormaktan çekinme

[@ugurdemirtas0]

8:08 de space between özelliği yeni sürümde yok sanırım bende öyle bir alan çıkmıyor

[@selcensafak3281]

hocam merhaba, pluginler bizlere çok fazla kolaylık sağlıyor en çok kullandığınız pluginleri söyleyebilir misiniz

[@endertopaloglu]

Merhaba bununla ilgili kanalda bir video var 😊

[@hazarguluzade6938]

Hocam peki bundan sonra buton veya kart tasarimlarinda rectangle aracinin pabucunu dama atabilir miyiz komple? Auto layoutla frame yapip zemin rengi veya radius verip halletmek cok daha kolay gibi gozukuyor. Ilerde tasarimda bir birinin icinde bu kadar cok frame olmasinin bir dezavantaji ola bilirmi? Su ana kadar esasen calistigim sayfayi veya buyuk bir containeri frame olarak yapiyordum suan bir aydinlanma yasiyorum. Mesela design system hazirladigimiz zaman 80-90 component buton var diyelim hepsi de frame, boyle olmasi dogru bir yapi mi?

[@endertopaloglu]

Evet kesinlikle rectangle'a veda edebiliriz :)) Buton, input veya design system'a bir şey eklediğimde hep auto layout kullanarak oluşturuyorum. Zaten figmayı diğer programlardan ayıran en büyük özellik bu. Doğru yoldasın 😄 👍🏻

[@sevdehoo4576]

figma guncellendigi icin bu videodaki araclari yeni yuzde bulmak o kadar zor ki packeti bulamadim nerede Allahin cezasi

[@dilanelci8010]

👏👏👏

[@burcuy.789]

Hocam öncelikle emekleriniz için teşekkürler. Bende resizing bölümü hiç görünmüyor frame kısmındaki benzer yerden yapıyorum uygulama farkıdır diye. Fakat, containeri sabit bi değerde büyütüp içindeki frameleri secip fill container ile yaymak istediğimde düzgün olmuyor. Sanki sola doğru yayıp sağ kısım yine boş kalıyor , neden olabilir ?

[@endertopaloglu]

Merhaba Burcu, hatanı anladım ve çok basit bir çözümü var. Ama cevabını senin bulmanı istiyorum. Bunun için de frame ve auto layoutla ilgili bol bol pratik yapman gerekiyor :)

[@sevincaliyeva7781]

aynı sorun bende de oluyor. çözümü buldun mu?

[@ayris8333]

çözümünü buldunuz mu acaba?

[@ylda1683]

hocam bu cmd tuşu nedir, bir türlü videodaki gibi yapamıyorum. ayrıntılı söyleseniz

[@mervesena7632]

ctrl

[@aycademir7379]

Hocam merhabalar. Her şeyi çok güzel açıklamışsınız emeğinize sağlık. Sayenizde iki saat araştırma yapmadan hızlı bir şekilde kavradım konuyu. Fakat bir nokta aklıma takıldı. Bu containerlar ve ekranın yan kenarı arasında olacak boşluğun büyüklüğünü piksel olarak ayarlamaktansa ekran genişliğinin belli bir yüzdesi olarak alabiliyor muyuz? Yani uygulamanın kullanıldığı her farklı framede benzer bir yapı gözükmesi açısından mesela 20 piksel olarak girmektense width*0.1 gibi bir değer yapabiliyor muyuz figmada? Yapıyorsak nasıl yapıyoruz? Yapamıyorsak da bunun başka bir çözümü var mı?

[@endertopaloglu]

Merhaba Ayça, malesef böyle bir şey giremiyoruz ama figmadaki constraints özelliğiyle bu sorunu çözebilirsin. Örneğin sağdan ve soldan 20px margin değer verirsin ve sayfa genişlese de bu hep 20px olarak kalır. Umarım doğru anlamışımdır :)

[@cancansem]

👍👍

[@gulsabahmustafayeva5564]

Salam, 15:21-ci saniyede cedvelin ilk sütununu dinamik olaraq sağa çəkdikdə digər sütunlarıda ona uyğun hərəkət edir. Sizin etdiyiniz kimi etdim, amma digər sütunlar ilk sütunu hərəkət etdirdikdə sabit qalır. Nece duzelde bilerem?

[@sevincaliyeva7781]

mende de ele olur(

[@melisecekazancoglu4691]

Hocam selam. Benim merak ettiğim başka bir konu var. Tasarımı yapıp bitirdikten sonra text revizesi geldi. Bütün textleri nasıl değiştirebilirim ya da değiştirebilir miyim?

[@endertopaloglu]

Merhaba, bunun için mutlaka bir plugin vardır :) Olmaması imkansız fakat özellikle bir plugin kullanmadığım için öneremiyorum. Community alanından arayıp rahatlıkla bulabilirsiniz

[@CJreyiz]

22:40 bu bende yok hocam napacam şimdi

[@kadircanmercan7906]

Hocam selamlar, 2 sorum olacak; 1) Üst üste gelmesi gereken frameler birbiriyle nasıl auto layout olacaklar? (Auto layoutu eksi- değerde kullanabilir miyim?) 2) Her tasarımımızı auto layout ile yapmak zorunda mıyız?

[@endertopaloglu]

Kadir merhaba, 1) eksi değer giremiyoruz bu benim için de sorun maalesef. Figma'nın çıakrtmasını beklediğim bi güncelleme. Bunun için frame veya grup içerisine alman gerekiyor 2) Auto layout figma'yı figma yapan şey. Eğer kullanma mantığını kavrayıp alışırsan kesinlikle neden kullanman gerektiğini anlarsın. Devam videolarımda (örn: sıfırdan web sayfa tasarımı) neden kullanılması gerektiğini örneklerle anlattım.

[@kadircanmercan7906]

@@endertopaloglu Hocam çok teşekkürler. 🙏

[@nothingordinary7126]

auto layout yapmak gerekli mi? Diğer uygulamalarda olduğu gibi onsuz yapamazmiyim?, xd de auto layout varmi?

[@endertopaloglu]

Auto layout çok büyük kolaylık. İlerleyen videolarda sebebini göstererek anlatıyorum. Adobe xd programında da var tabii

[@bulentgercek]

Figma gibi yazılımların varoluş nedeni daha hızlı ve verimli iş yapmak ve üretim masrafının azaltılması. Tabii ki auto-layout kullanmadan da yapabilirsin. Ama o zaman Figma kullanmanın amacının dışına çıkmış olursun. Asıl amac sadece tasarım yapmak değil, yaptığın tasarımın plan ve kurgusunun yazılımcıya kolayca aktarılmasıdır. Yoksa aç photoshop'ta da yap. Ama sonra oturup açıklaman gerekir "şu menu uzayacak, bu kısalacak" vb. gibi ;)

[@endertopaloglu]

@@bulentgercek Kesinlikle katılıyorum 👍🏻

[@celalhuseynov3467]

Merhaba Hocam figmanın derinliklerine kadar bilmezsek web design çalışamazmıyız?

[@endertopaloglu]

Çalışırsınız tabii ama ne kadar çok iyi bilirseniz o kadar daha hızlı ve doğru çalışırsınız :) Ben tüm tüyolarını ve özelliklerini anlattım.

[@ayselrustemova6312]

Figmayi figmadan daha iyi anlatınız

[@endertopaloglu]

Teşekkürler ☺

[@senamenes883]

space between artık 'auto' olmuş

[@yagztemizel]

hocam bunları bi güncellemeyi düşnüyormusnuz güncellemeden sonra çok karışık kaldı...

[@beyzabeyza485]

ayni sorunu yaşıyorum ama yine de çok faydalı biraz internetten de bakarak halletmeye çalışıyorum

[@Kiziyorum]

izlerken basit de yaparken aynısı olmuyo :D

[@tasarmyelkeni2125]

.