Figma'da İmlece Tepki Veren İnteraktif Bir Web Sitesi Hero'su Yaptım. İşte Süreci.

"Tasarım iş akışında AI" demolarının çoğu statik bir görüntüde kalır. Bu ise hareket ediyor. İmlecine doğru eğilen sinematik bir bilim kurgu manzarası, tek bir 3D dosyası ya da tek satır shader kodu olmadan Figma'da yapılmış interaktif bir web sitesi hero'su. Her şey, her gün çalıştığım canvas içindeki Higgsfield eklentisinden çıktı.

İşte bitmiş hero. Yükleyici kalibre oluyor, sahne açılıyor, ardından her yönde imlece tepki veriyor.

Her şey dört hamlede tamamlanıyor ve aşağıdaki her prompt kopyalamaya hazır:

1. Sahneyi tek bir sinematik kurucu çekim olarak oluştur.
2. Aynı sahneyi dört hafifçe kaydırılmış kamera açısından oluştur.
3. Bu açı kliplerini düz bir görüntü dizisine dönüştür.
4. Diziyi imlece bağla ve gerçek bir sayfa olarak giy.

Bunların hiçbiri için After Effects, 3D uygulaması ya da mühendis gerekmiyor. Tek bir eklenti ve tek bir yapım promptu yeterli.

Adım 1: Sahneyi oluştur

Figma içinde Higgsfield eklentisini aç ve tek bir sinematik kurucu çekim oluştur. Buradaki püf nokta, net bir derinlik istemek; ön plan, orta plan ve arka planı ayrı düzlemler olarak, çünkü bu ayrım parallax'ın sonraki adımlarda okunmasını sağlayan şey. Fotoğraf değil, resim.

Soft hand-painted sci-fi concept art, cinematic and atmospheric. A lone armored hero on a dark rocky cliff in the near foreground, gazing out over a vast misty valley of floating islands and tall glowing spires fading into an aurora sky. Strong depth built from clearly separated planes: dark foreground cliff and hero, floating rocks in the midground, distant spires far behind, soft atmospheric haze between each layer. Moody purples and teals with warm light. Simple and clean, not busy, painterly brushwork, epic scale.

Copy

Adım 2: Kamera açılarını oluştur

Şimdi aynı sahneyi dört hafifçe kaydırılmış kamera konumundan oluştur: yukarı, aşağı, sol, sağ. Burada önemli olan kelime eğmek değil, yörüngede dolaşmak.

Eğmek kamerayı yerinde döndürür ve neredeyse hiç parallax vermez. Yörüngede dolaşmak kamerayı uzayda hareket ettirir, böylece yakın kayalık sallanırken uzak kuleler neredeyse kıpırdamaz. Bu fark, illüzyonun ta kendisi. Açıyı küçük tut, yaklaşık 12 derece, ve hiçbir şeyin kareler arasında sallanmaması için çekimi sabitle.

Single-axis camera ORBIT UP only, about 12 degrees, locked-off and gimbal-smooth, no handheld, no camera shake, no wobble. Vertical axis only, no horizontal drift, no diagonal. The scene is completely frozen, nothing in it moves, only the camera. Slow, subtle, seamless. Strong parallax: near foreground shifts more than the distant background.

Copy

Adım 3: Klipleri görüntü dizisine dönüştür

Her yörünge klibini kare olarak dışa aktar. Burada video oynatmıyorsun; imleç tarafından taranabilecek bir çevirmeli kitap yapıyorsun. Başarısızlık ile başarı arasındaki tek kural şu: imlekin bulunduğu yere en yakın tek kareyi göster ve asla iki kareyi birbirine karıştırma.

Bu kural, yaşadığım ve düzelttiğim üç başarısızlık modundan geliyor, sırasıyla:

• Hareketi "yumuşatmak" için iki bitişik kareyi karıştırmak, hayaleti, yani çift görüntü lekesini tam olarak üreten şeydir.
• Canlı bir video dosyasını arayarak mousemove'da oynatma kafasını zıplatmak, video aramanın kare doğru olmadığı için titreme üretir.
• Birkaç kare, slayt gösterisi gibi adımlı ve ucuz hissettiriyor.

Üçünün de düzeltmesi aynı: çok sayıda kare, sıfır karıştırma ile imlece en yakın şekilde birer birer gösterilir. Yön başına yeterince kare dışa aktar ve hareket gerçek derinlik gibi okunur.

Adım 4: Diziyi imlece bağla

Son hamle etkileşim. Figma Make'e beş düz kareyi ver: yukarı, aşağı, sol, sağ ve bir merkez; ardından aşağıdaki promptu. Bu, imleci doğru kareye eşler, hareketin kayarcasına olması için kolaylaştırır, kalibrasyon yükleyiciyi ekler ve logo, menü, başlık ve düğmelerin hepsinin sahneyle aynı dünyada yaşadığı tam arayüzü üstteki katmanlara yerleştirir.

Build a full-screen interactive hero. I provided the flat frames of a scene captured from up, down, left and right camera angles, plus a center frame. Stack them on a canvas. On mousemove, show the single frame nearest to the cursor's dominant axis (horizontal vs vertical, whichever is larger), eased so it glides. No blending between frames except a brief 100ms dissolve when the axis switches. Start with a calibration loader: a centered crosshair that draws in, counts up, then locks and becomes the live cursor as the scene reveals. Over the scene, lay a full interface in the same minimal monospace HUD style: a wordmark logo top-left, a horizontal nav menu top-right, a centered headline with one line of subtext, and a primary plus a secondary button. Thin rules, small uppercase labels, so the chrome and the scene read as one system. Dark and minimal. Respect prefers-reduced-motion.

Copy

Bu neden önemli

Mesele uzay gemisi değil. Mesele şu: bir tasarımcı artık bir 3D sanatçısı, render çiftliği ve WebGL mühendisi gerektiren bir hareket parçasını, her gün içinde yaşadığı araçtan yayına alabilir.

Gerçekte neyin üretildiğine karşı neyin satın alındığına bak. Sahne, dört kamera açısı ve tam kare dizisi hepsi oluşturuldu. Montaj, kareleri imlece eşlemek ve sayfayı giydirmek, tek bir yapım promptuydu. Toplam maliyet bir öğleden sonra ve bir eklentiydi; prodüksiyon bütçesi ve üç yüklenici değil.

Dikkat etmeye değer dönüşüm bu. "Sinematik ve interaktif" için çıta eskiden bir ekipti. Şimdi ise bir prompt ve ayrıntılar üzerinde kafa yormak istemek, ki bu tasarımcıların zaten her zaman iyi olduğu kısım.

Bir tane yaparsan Brainy'yi etiketle. Görmek istiyoruz.