Claude Code Figma dosyamda ilk kez bir şey çizdiğinde şöyle düşündüm: bu bana çok fazla fırsat verecek. Verdi de. Figma artık ajanımın işlerinin çoğunun geçtiği yer: iki ayda Figma becerisi 528 beceri çağrısının 480'ini oluşturdu. Kurulumum hakkında daha fazlası Claude Code kod için değil yazımda.
Neden görsel üretimi değil de Figma
Çünkü vektör olmasına ihtiyacım var. Üretilmiş bir görsel düz bir resimdir. Figma dosyası ise üzerinde çalışmaya devam edebileceğim bir şey:
- Katmanlar ve gerçek metin. Hiçbir şeyi yeniden çizmeden bir yazım hatasını düzeltebilir, bir rakamı değiştirebilir ya da bir slaytı çevirebilirim.
- Kendi tasarım sistemim. Renkler, yazı tipleri ve bileşenler token'larımdan geliyor, böylece her yeni parça eskilerle uyumlu oluyor.
- Tek kaynaktan baskı ve web. Aynı çerçeveler fuar standları için baskı dosyası, sitem için de SVG olarak dışa aktarılıyor.
- Kontrol bende kalıyor. Dosyayı açıp her şeyi kendim değiştirebilirim.
Figma'mda neler var
- Notion şablon mağazam. Tasarım sisteminde 55 değişken, 13 metin stili ve 6 bileşen seti var; bunlara blogun 28 makalelik ilk dalgasının kapakları ve diyagramları da ekleniyor, her biri telefon sürümüyle.
- Üç dilde şirket sunumları. Konteyner veri merkezleri hakkındaki bir sunum İngilizce, Rusça ve Türkçe 15 slayttan oluşuyor ve üç sürüm birbiriyle senkron tutuluyor.
- Fuar standları ve baskı. Stant panoları, afişler, üç kırımlı bir broşür, kuponlar ve sertifikalar, baskı için dışa aktarılmış halde.
- Bu site. zoyak.tech ana sayfasındaki bölüm ikonları ilk olarak Figma'da doğdu.
En gurur duyduğum iş şablon mağazası. Yalnızca tasarım açısından değil, içerik açısından da çok iyi; içeriğini kendi çalışmalarım için de kullanmayı planlıyorum.
Döngü: ajan taslak çıkarır, ben düzenlerim, siteye benim sürümüm gider
Ajan bir tasarımı asla doğrudan siteye göndermez. Dosyamda çizer, ben bakarım, elle düzenlerim ve sonuç ancak ondan sonra dışa aktarılır.
Ana sayfa ikonları buna iyi bir örnek. Ajan birkaç yönü yan yana çizdi, ben birini seçip ayrıntıları kendim rötuşladım; Studies kitabındaki sayfa bloğunu inceltmeye varana kadar. Sitedeki SVG'ler düzenlediğim çerçevelerden dışa aktarıldı, bu yüzden elle yaptığım her değişiklik tam bıraktığım gibi yayına girdi.
Ajanın Figma hakkında öğrenmesi gerekenler
Figma API'si üzerinden çalışmak, Figma'da elle çalışmakla aynı şey değil. Ajanımın hafızasında artık yalnızca Figma hakkında 17 not var. Derslerden birkaçı:
- Metin genişliği ölçülmeli. Harf sayısından tahmin edilemez.
- Çerçeveler içeriklerini kırpar. “Orada” olan bir öğe görünmez olabilir.
- Opaklık iki yerde yaşar. Dolgu opaklığı ile katman opaklığı farklı şeylerdir.
- Node ID'leri eskir. Dün çalışan bir referans bugün hiçbir şeyi göstermeyebilir.
- Logolar dosyalar arasında API ile taşınamaz, bu yüzden yeniden çizilir ya da elle kopyalanır.
- SVG dışa aktarımının tuhaflıkları var, bu yüzden dışa aktarılan dosyalar yayına girmeden önce kontrol edilir.
- Animasyonlar API üzerinden yapılamaz.
Tasarım işi için kurallarım
Ajan, görsel olan her şey için ona verdiğim kurallara da uyuyor:
- Önce Figma'da göster, canlı sitede değil.
- Gerçek ikon setleri, asla emoji değil, yayına giden her şeyde.
- Konu belirli bir araçsa onun gerçek logosunu kullan, benim stilimde yeniden çizilmiş haliyle; bir metafor değil.
- İnfografikler hafif ve ferah kalır: soluk arka planlar, yumuşak gradyanlar, tek bir vurgu rengi.
Neden önemli
Vektör, işin bende kalması demek. Ajan beni dakikalar içinde ilk sürüme ulaştırıyor ve ondan sonraki her şey, ister onun ister benim elimden, düzenlenebilir kalıyor. Görsel düşünen ama elinin altında hiçbir zaman bir tasarım ekibi olmayan biri için ilk gün gördüğüm fırsat buydu.