Yapay zeka araçları artık çok revaçta. Piyasaya sürülen yeni bir yapay zeka aracı veya yapay zekanın milyonlarca işi nasıl elinden alacağı hakkında haberler bulmadan herhangi bir sosyal medya platformunu açmak zor.

ChatGPT'nin birçok meslekte değerli olduğu kanıtlandığından ve yalnızca ileriye dönük olarak gelişmesi beklendiğinden, yeteneklerini ve sınırlamalarını test etmeye karar verdim. Mühendislikten tasarıma geçiş yapmış biri olarak , orta düzeyde kodlama bilgim var ama bu hiçbir zaman benim güçlü yanım olmadı. ChatGPT'nin benim gibi minimum kodlama bilgisine sahip birine işlevsel bir uygulama veya web sitesi oluşturma konusunda yardımcı olup olamayacağını merak ediyordum .

Beyin fırtınası fikirleri

ChatGPT'nin şu anda birden çok özellikle kapsamlı kod üretemediğini anlıyorum. Bu nedenle, ChatGPT kullanılarak gerçeğe dönüştürülebilecek basit fikirler arıyordum. Bir tasarımcı olarak, doğal olarak bir Figma Eklentisi oluşturmaya yöneldim .

Geçenlerde bir web tasarım projesi üzerinde çalıştım ve Figma'daki çerçevemde 12 sütunlu bir ızgaraya ihtiyacım vardı. Web sayfalarını tasarlamak için 12 sütunlu bir ızgara kullanmak, birçok tasarımcı için yaygın bir uygulamadır. Bileşenleri hizalamaya ve web sitesini yapılandırmaya yardımcı olur. Ancak, Figma'da 12 sütunlu bir ızgara oluşturmak, birden çok tıklama ve belirli değerlerin girilmesini gerektirir. Tek bir tıklama ile ızgarayı oluşturan süreci basitleştirmek istedim.

Bu, ChatGPT ile deney yapmak için mükemmel bir fikir gibi geldi.

Bir tasarımcı olarak, bir Figma eklentisi geliştirmeye nasıl başlayacağım konusunda hiçbir fikrim yoktu. İnternete baktım ve bu süreçte bana yardımcı olan aşağıdaki kaynakları buldum:

Başlamama yardımcı olan kaynaklar

https://medium.com/ux-planet/i-built-a-figma-plugin-with-just-chatgpt-no-coding-needed-7d94958e0ec

Kodlama Zamanı

ChatGPT ile başladım ve aşağıdaki istemi girdim.

“Figma Eklentileri geliştirme konusunda deneyime sahip uzman bir geliştiricisiniz.

Lütfen bana bir çerçeve için ızgarayı açan bir Figma Eklentisi kodu konusunda yardım edin. Izgara, cilt payı 20 ve Kenar Boşluğu 200 olan 12 sütuna sahip olmalıdır. Izgaranın rengi, %10 opaklıkla kırmızı olmalıdır. Eklenti herhangi bir kullanıcı arayüzü gerektirmez. Bir kullanıcı bir çerçeve seçtiğinde yürütülmeli ve çalıştırmaya tıklamalıdır."

VAY! Pek çok gramer hatasıyla istem tamamen net olmasa da ilk denemede kodun ne kadar doğru olduğuna şaşırdım.

Eklentiyi Figma'da test etme zamanı.

Ne yazık ki eklenti, Figma'da çalıştırıldığında bir hatayla sonuçlandı.

ChatGPT'de bu hatadan bahsettim ve doğru kodu yeniden oluşturmamı istedim. Ancak yeni oluşturulan kod bu sefer farklı bir hatayla sonuçlandı. ChatGPT'nin birden çok kez çalıştırıldığında aynı bilgi istemi için farklı kod sürümleri ürettiğini fark ettim.

İleri geri gidip kodu birkaç kez yeniden oluşturduktan sonra, eklenti sonunda çalıştı.

Ancak,

Sonuç beklendiği gibi olmadı.

Renk ve oluk gibi birkaç şeyi doğru yaptı ama sütunların kendisi çok inceydi.

ChatGPT'den, ızgaranın her iki tarafta 200 piksellik bir kenar boşluğu ile dinamik olarak çerçevenin kalan alanını kaplaması için kodu değiştirmesini tekrar istedim.

Yine yanlış kod üretmeye başladı. Bilgi istemini birkaç kez değiştirdikten ve yeniden oluşturduktan sonra bile, daha önce aldığım hataların aynısını alıyordum. Bu noktada bitkin düştüm.

Sınırlı kodlama becerilerim imdada yetişiyor!

Buraya kadar geldiğim için pes etmek istemedim. Kodlama konusunda biraz deneyimim olduğu için meseleleri kendi ellerime almaya karar verdim.

Çevrimiçi arama yaptım ve Figma API belgelerini buldum . Izgaraların özelliklerini inceledim ve tam olarak ihtiyacım olan şeyi buldum.

Mevcut alanı dinamik olarak doldurmak için "hizalama" özelliği "STRETCH" değerine sahip olmalıdır.

Bahsedildiği gibi, “hizalama” 'STRETCH' olarak ayarlandığında “sectionSize” gerekli değildir.

Değişiklikleri buna göre yaptım ve tekrar test ettim.

Bu sefer işe yaradı!

Sonuçtan son derece memnun kaldım ama hala iyileştirme için yer olduğunu hissettim.

Izgaranın her iki tarafında 200 piksel ofset verdiğim için, her boyuttaki çerçeveyle iyi çalışmıyor. Izgaranın boyut olarak dinamik olmasını ve herhangi bir çerçevenin genişliğinin %75'ini kaplamasını istiyorum .

ChatGPT'ye sorup tekrar deneme yanılma sürecine girmek istemedim. Bu basit bir değişiklikti — Sabit bir değer vermek yerine sadece ofset için bir formül ekledim.

Ofset formülünü (çerçeve.genişlik)*0.125 olarak ayarladım.

İşte nasıl çalıştığı:

Diyelim ki çerçevenin genişliği 1920px. Bu durumda ofset , ızgaranın her iki tarafında 1920*0,125 = 240 piksel olacaktır ⇒ 240*2 = 480 piksel

Bu nedenle ofset 480 pikseldir(1920'nin %25'i) ve ızgara 1440 pikseldir(1920'nin %75'i).

Ayrıca cilt payını 24px olarak değiştirdim çünkü daha yaygın olarak kullanılıyor ve rengi Teal olarak değiştirdim. İşte nihai sonuç:

Eklentinin Figma'da Yayınlanması

Gerekli detayları (Eklenti adı, açıklama, Simge vb.) girdim ve eklentiyi Figma Community'de yayınladım.

Figma tarafından onaylanıp onaylanmayacağından şüpheliydim ama 2 saat içinde onaylanması beni şaşırttı.

Eklenti bağlantısı

Basitçe bir çerçeve seçin ve "çalıştır"a tıklayın.

Temel Öğrenimler ve Karşılaşılan Zorluklar.

• ChatGPT, birçok potansiyel uygulama ile son derece güçlü olsa da, daha iyi sonuçlar elde etmek için yine de manuel müdahale gerektirir.
• Farklı alanlarda temel bilgilere sahip olmak ve ChatGPT'nin yardımını almak, tek başına elde edilmesi imkansız olan sonuçlara ulaşmamıza yardımcı olabilir.
• ChatGPT, aynı bilgi istemi için bazen yanlış yanıtlar içerebilen birden çok çıktı sürümü oluşturur. Kullanmadan önce her bir çıktının doğruluğunu dikkatlice gözden geçirmek ve değerlendirmek önemlidir.
• Hızlı mühendislik, gelecek için hayati bir beceridir. Açıklamalarınız ne kadar doğru olursa, ChatGPT o kadar iyi sonuçlar verir.

Herhangi bir sorunuz/öneriniz/geri bildiriminiz olması durumunda bana ulaşmaktan çekinmeyin. LinkedIn'de bağlantı kurmaktan mutluyum.

https://www.linkedin.com/in/naren-abbaraju/