Figma’e aktarın: Buddy, Görselleri, HTML’i, Claude tasarımını, Claude prototiplerini ve Web Sitelerini Katmanlara dönüştürür9 min read

Tasarım çalışmaları artık tek bir yerde başlamıyor.

Bazen ilk fikir bir Claude Design prototipidir. Bazen bir Claude eseridir. Bazen bir HTML deneyi, bir ekran görüntüsü, sevdiğiniz bir açılış sayfası veya ekibinizin öğrenmek istediği canlı bir web sitesi olabilir.

Sorun yapay zekanın veya internetin ilginç bir şey yaratmasını sağlamak değil. Sorun, bu fikri ürün tasarımının gerçekte gerçekleştiği yere, yani Figma’e geri döndürmek.

Buddy, neredeyse her şeyi Figma’e aktarmanıza ve bunları tuval üzerinde düzenlenebilir tasarım katmanlarına dönüştürmenize olanak tanır. Düzleştirilmiş bir ekran görüntüsü değil. Statik bir referans görüntüsü değil. Düzenleyebileceğiniz, düzenleyebileceğiniz, hassaslaştırabileceğiniz ve devredebileceğiniz gerçek katmanlar.

Buddy ile her şeyi Figma’e aktarın, ardından Figma’te tasarlamaya devam edin

Buddy, Anima’in Figma yapay zeka tasarım aracısıdır. Figma’in içinde yaşar, tuvalinizi okur ve sohbet aracılığıyla tasarımlar oluşturmanıza, düzenlemenize ve organize etmenize yardımcı olur.

Artık Buddy aynı zamanda dışarıdan gelen ilhamla Figma iş akışınız arasında köprü görevi görüyor. Bir yapıyı, görüntüyü, ekran görüntüsünü, HTML veya URL’i yapıştırdığınızda Buddy bunu düzenlenebilir Figma katmanlarına dönüştürür, böylece her kareyi manuel olarak yeniden oluşturmanıza gerek kalmadan tasarım sürecine devam edebilirsiniz.

Bu, aşağıdakilerden başlayabileceğiniz anlamına gelir:

• Claude Design eserleriYapay zeka tarafından oluşturulan bir arayüzü Figma’e getirmek istediğinizde.
• Claude eserleriClaude’da bir prototip, ekran veya etkileşimli fikir oluşturulduğunda.
• HTML eserleri, tasarım oluşturulan HTML’ten veya kodlanmış bir modelden başladığında.
• Resimler ve ekran görüntüleri, görsel bir referans yapıştırmak ve düzenlenebilir Figma katmanları elde etmek istediğinizde.
• Web sitesi URL’lerGenel bir web sitesini Figma’e tasarım olarak kopyalamak istediğinizde inceleyebilir ve yeniden karıştırabilirsiniz.

İş akışı basittir: Kaynağı Buddy’e getirin, Anima’in görsel yapıyı yorumlamasına izin verin, ardından doğrudan Figma tuvali üzerinde tasarıma devam edin.

Bu neden önemli: Yapay zeka size ilk taslağı verir, Figma kontrolü size verir

Yapay zeka araçları ilk taslakları oluşturmada çok iyidir. Dakikalar içinde uygulama konseptleri, açılış sayfaları, gösterge tabloları, katılım akışları, fiyatlandırma sayfaları, dahili araçlar ve ürün denemeleri oluşturabilirler.

Ancak profesyonel tasarım çalışmaları ilk taslakta bitmiyor. Genellikle orada başlar.

Ekiplerin yine de kopyayı düzenlemesi, hiyerarşiyi düzeltmesi, markayı uygulaması, aralıkları hizalaması, bileşenleri kullanması, uç durumları gözden geçirmesi ve diğer tasarımcıların, PM’lerin ve mühendislerin gerçekten üzerinde çalışabileceği bir dosya hazırlaması gerekiyor.

Bu nedenle ithalat önemli. Yapay zeka tarafından oluşturulan bir fikir, bir sohbet penceresi, yapı görüntüleyici, ekran görüntüsü veya tarayıcı sekmesinde kilitli kalırsa, gerçek bir ürün tasarımı iş akışına dönüştürülmesi zordur.

Buddy, bu çalışmayı düzenlenebilir katmanlar olarak Figma’e geri getirir, böylece AI çıktısı ekibinizin şekillendirebileceği bir şeye dönüşür.

Claude Design yapıtlarını Figma’e aktarın

Claude Design, kullanıcı arayüzü fikirlerini ve etkileşimli kavramları hızlı bir şekilde keşfetmek için mükemmeldir. Bir ürünü, özelliği veya açılış sayfasını açıklayabilir ve hızlı bir şekilde gösterişli bir yapıya sahip olabilirsiniz.

Ancak bir sonraki adım tasarımın gözden geçirilmesi, markanın iyileştirilmesi veya devredilmesi ise ekibinizin genellikle Figma’teki sonuca ihtiyacı vardır.

Buddy ile Claude Design yapısını Figma’e getirebilir ve oradan devam edebilirsiniz. Buddy, arayüzü düzenlenebilir katmanlar halinde yeniden oluşturur; böylece tuval üzerindeki düzeni, tipografiyi, renkleri, aralığı, simgeleri ve içeriği ayarlayabilirsiniz.

Bu, bir kurucu, proje yöneticisi, pazarlamacı veya mühendisin önce bir yapay zeka prototipi oluşturması ve ardından bir tasarımcının bunu üretim kalitesinde yapmasını istemesi durumunda faydalıdır.

Claude eserlerini ve yapay zeka prototiplerini içe aktarın

Claude yapıları birden fazla ekran içerebilir. Durumları, panelleri, menüleri, formları, tabloları, kartları, boş durumları ve tam kullanıcı arayüzü kavramlarını içerebilirler.

Ekran görüntülerini manuel olarak almak ve tasarımı izlemek yerine yapıyı Buddy’e yapıştırın. Anima, onu ekibinizin düzenleyebileceği yapılandırılmış bir Figma tasarımına dönüştürür.

Tuval üzerine çıktıktan sonra şunları yapabilirsiniz:

• Ekranları çerçevelere ayırın.
• Metni ve ürün kopyasını düzenleyin.
• Aralığı ve hiyerarşiyi hassaslaştırın.
• Genel görselleri marka varlıklarıyla değiştirin.
• Tasarım sisteminizi uygulayın.
• Tasarımı inceleme veya mühendislik devri için hazırlayın.

Yapay zeka prototipi bir çıkmaz sokak değil, başlangıç ​​noktası haline geliyor.

HTML yapıtlarını Figma’e aktarın

Pek çok yapay zeka aracı artık tasarım çıktısı olarak HTML üretiyor. Bu, hızlı önizlemeler için yararlı olabilir ancak HTML, ürün tasarımını değerlendirmek için her zaman en iyi yer değildir.

Tasarımcıların tuval kontrolüne ihtiyacı var. Katmanları taşımaları, seçenekleri karşılaştırmaları, hiyerarşiyi incelemeleri ve çalışmayı bir tasarım sistemiyle uyumlu hale getirmeleri gerekiyor.

Buddy, HTML yapıtlarını Figma’e geri getirerek yardımcı olur. HTML çıktısını kaynak olarak kullanabilir, ardından onu temizlenebilen, yeniden düzenlenebilen ve cilalanabilen düzenlenebilir Figma katmanlarına dönüştürebilirsiniz.

Bu, özellikle kodda prototip hazırlayan, ardından işbirliği için uygun bir tasarım dosyasına ihtiyaç duyan ekipler için faydalıdır.

Bir görseli veya ekran görüntüsünü yapıştırın ve düzenlenebilir Figma katmanları elde edin

Ekran görüntüleri ürün çalışmasının her yerindedir.

Kullanıcı beğendiği bir akışın ekran görüntüsünü gönderir. Bir takım arkadaşı bir rakibin sayfasını paylaşıyor. Bir Başbakan, Slack’e kaba bir kullanıcı arayüzü fikri aktarıyor. Bir kurucu, başka bir yapay zeka aracıyla bir açılış sayfasının taslağını çiziyor.

Normalde bu ekran görüntüsü yalnızca bir referanstır. Bunu Figma’e yerleştirebilirsiniz, ancak yine de düzenlemek istiyorsanız kullanıcı arayüzünü manuel olarak yeniden oluşturmanız gerekir.

Buddy ile bir görüntüyü veya ekran görüntüsünü yapıştırabilir ve düzenlenebilir Figma katmanlarına dönüştürebilirsiniz. Metin, düzen, görsel yapı ve kullanıcı arayüzü öğeleri tuval üzerinde çalışabileceğiniz şeyler haline gelir.

Bu, sürecin en can sıkıcı kısmını ortadan kaldırır: Sırf değişiklik yapabilmek için zaten var olanı yeniden yaratmak.

URL yapıştırarak herhangi bir web sitesini klonlayın

Web sitesi ilhamı, yeni ürün ve pazarlama çalışmaları için en yaygın başlangıç ​​noktalarından biridir.

Belki bir SaaS ana sayfasının yapısını beğeniyorsunuzdur. Belki bir fiyatlandırma sayfasını incelemek istersiniz. Belki bir kontrol paneli düzeni, katılım akışı veya açılış sayfası bölümü yakalamanız gerekebilir.

Buddy ile URL web sitesini yapıştırabilir ve sayfayı düzenlenebilir bir tasarım olarak Figma’e getirebilirsiniz. Buddy, ekran görüntüsünü kaydetmek yerine görsel yapıyı tuval üzerinde katmanlar halinde yeniden oluşturmanıza yardımcı olur.

Kalıplardan öğrenmek, alternatifleri keşfetmek, ruh hali tabloları oluşturmak veya yeni bir sayfanın ilk sürümünü hızlandırmak için bunu kullanın. Daha sonra kopyanız, bileşenleriniz, markanız ve ürün hikayenizle onu kendinize ait hale getirin.

Figma kanvasında neler elde edersiniz?

Temel fark düzenlenebilirliktir.

Buddy yalnızca tuval üzerine bir bitmap yerleştirmek değildir. Amaç size düzenlenebilecek, incelenebilecek ve geliştirilebilecek uygulanabilir bir Figma tasarımı sunmaktır.

İçe aktarmanın ardından normal Figma çalışmasına devam edebilirsiniz:

• Metni doğrudan düzenleyin.
• Katmanları taşıyın ve yeniden boyutlandırın.
• Renkleri, yazı tiplerini, aralığı ve hiyerarşiyi ayarlayın.
• Çerçeveleri ve bölümleri düzenleyin.
• Gerektiğinde Otomatik Düzen’i uygulayın.
• Kaba elemanları gerçek bileşenlerle değiştirin.
• Sonucu tasarım sisteminizle hizalayın.

Buddy’in amacı budur: kontrolü kaybetmeden hız.

Yapay zeka tarafından oluşturulan tasarım için daha iyi bir iş akışı

Eski iş akışı şuna benziyordu:

1. Bir yapay zeka aracında bir fikir oluşturun.
2. Ekran görüntüleri alın.
3. Ekran görüntülerini Figma’e yapıştırın.
4. Tasarımı manuel olarak sıfırdan yeniden oluşturun.
5. Gerçek tasarım çalışmasına başlayın.

Buddy iş akışı daha kısadır:

1. Kaynağı oluşturun veya bulun: yapı, HTML, resim, ekran görüntüsü veya URL.
2. Buddy’e yapıştırın.
3. Düzenlenebilir Figma katmanlarını edinin.
4. Tuval üzerinde tasarlamaya devam edin.

Bu önemlidir, çünkü daha fazla ekip yapay zeka ve web ilhamından yola çıkıyor ancak yine de profesyonel bir tasarım iş akışına ihtiyaçları var. Buddy bu dünyaları birbirine bağlar.

Bu kimin için?

Buddy’e Her Şeyi İçe Aktarma, Figma iş akışını kaybetmeden hızlı hareket etmesi gereken herkes için kullanışlıdır.

• Tasarımcılar AI çıktılarını ve ekran görüntülerini düzenlenebilir başlangıç ​​noktalarına dönüştürebilir.
• Özel Mesajlar Daha net ürün tartışmaları için Claude eserlerini veya web sitesi referanslarını Figma’e getirebilir.
• Kurucular her şeyi manuel olarak yeniden oluşturmaya gerek kalmadan fikirden tasarım dosyasına geçebilir.
• Pazarlamacılar açılış sayfası ilhamını kopyalayıp markalarına uyarlayabilir.
• Mühendisler HTML veya AI araçlarında prototip oluşturabilir ve ardından sonucu tasarıma geri aktarabilir.

Bu tasarımı değiştirmekle ilgili değil. Bir fikir ile düzenlenebilir bir tuval arasındaki sıkıcı yeniden yapılanma çalışmasını ortadan kaldırmakla ilgilidir.

Bir sonraki fikrinizi Buddy’e aktarmayı deneyin

Bir sonraki harika ürün ekranı Claude Design, bir Claude yapısı, oluşturulmuş bir HTML prototipi, bir ekran görüntüsü veya bir URL web sitesi ile başlayabilir.

Buddy ile bu başlangıç ​​noktası, mevcut iş akışınızda düzenlenebilir bir Figma tasarımı haline gelebilir.

Bunu Buddy’e yapıştırın, katmanları tuval üzerine alın ve tasarlamaya devam edin.