Figma'dan web sitesine: bir açılış sayfası yayınlayın
Figma'daki bir pazarlama çerçevesini HTML, CSS ve JavaScript'e dönüştürün, ardından tamamlanan siteyi yayınlayın.
Figma tasarımlarını çalışan web uygulamalarına dönüştürün
Bir Figma çerçeve bağlantısı yapıştırın, sayfanın ne yapması gerektiğini tanımlayın ve Manus'ın yayınlayabileceğiniz ön uç ve arka ucu oluşturmasına izin verin.
Tasarım çerçevesinden çalışan sayfaya
Manus, işlevsel bir web uygulaması oluşturmak için Figma çerçevesindeki düzeni, bileşenleri, yazı tiplerini ve renkleri okur.
Tasarım çerçevesiÇalışan sayfa
Örnek gösterim.
İhtiyacınız olan sayfalar için tasarımdan koda
Bir açılış sayfası, bir pano veya birbirine bağlı birkaç çerçeveyle başlayın. Her istek, tasarımın arkasındaki davranışı tanımlayabilir.
Figma'dan koda: çalışan bir panel oluşturun
Bir yönetici kontrol paneli tasarımı paylaşın ve ihtiyacınız olan verileri ve işlemleri açıklayın. Manus ön uç ve arka uç bileşenlerine sahip bir web uygulaması oluşturur.
Figma'dan uygulamaya: tüm akışı bağlayın
Birden fazla kareyi tek bir tasarımdan koda isteğine dahil et. Sayfaların nasıl bağlandığını, tıklamada ne olduğunu ve hangi bileşen durumlarının önemli olduğunu açıkla.
Figma'yı eklenti yerine bir bağlantıyla koda dönüştürün
Belgelenmiş iş akışı için ayrı bir Figma tasarımdan koda eklentisine gerek yoktur. Figma hesabınızı bağlayın, bir çerçeve bağlantısı yapıştırın ve sayfada ne işe yarayacağını söyleyin.
Sitenizi yayınlayın, sonra geliştirmeye devam edin
AI tasarımdan koda dönüşüm önizlemeyle bitmez. Web sitesini yayınlayın, kendi alan adınızı bağlayın ve istediğiniz değişiklikleri bir sohbette anlatın.
Bir bağlantı, net bir istek, yayınlayabileceğiniz bir site
Çerçevelerinizin nasıl bağlandığını açıklayın. Ardından sonucu gözden geçirin ve sohbette değişiklik yapmaya devam edin.
Manus ile üretmeye devam et
Sık Sorulan Sorular
Figma'yı Manus ile koda nasıl dönüştürürüm?
Figma hesabınızı Manus'a bağlayın, ardından bir Figma çerçevesinin bağlantısını paylaşın ve oluşturmak istediğiniz web uygulamasını açıklayın. Manus, çerçevenin düzenini, bileşenlerini, yazı tiplerini ve renklerini okur, ardından ön yüzü ve gerekli arka uç bileşenlerini oluşturur.
Manus Figma'yı HTML ve CSS'ye dönüştürebilir mi?
Evet. Belgelenen Figma içe aktarma, ön yüz için HTML, CSS ve JavaScript oluşturur, ayrıca istenen web uygulaması için gereken arka uç bileşenlerini üretir. Varsayılan olarak, Manus bunu tarayıcıda HTML, CSS ve JavaScript olarak çalışan bir React ve Tailwind CSS projesi olarak oluşturur. Çerçeve bağlantısıyla birlikte gereken sayfaları ve davranışı tarif edin.
Manus, Figma'dan React'e ve Figma'dan Tailwind'e dönüşümü destekliyor mu?
Evet. Manus, web sitelerini varsayılan olarak React ve Tailwind CSS ile oluşturur; böylece Figma'dan içe aktarılan bir tasarım, Tailwind ile stillendirilmiş bir React ön uç ve isteğinizin gerektirdiği arka uç kodu haline gelir. Proje kodunu özel bir GitHub deposuna aktarabilirsiniz.
Bir Figma koda dönüştürme eklentisine ihtiyacım var mı?
Belgelenmiş akışın bir parçası olan ayrı bir eklenti yoktur. Figma hesabınızı bağlayın, bir çerçeve bağlantısını Manus ile paylaşın ve ne oluşturulacağını açıklayın; tasarımınızda birden fazla sayfa veya durum olduğunda daha fazla çerçeve ekleyebilirsiniz.
Bir Figma MCP sunucusu kurmam gerekiyor mu?
Hayır. Manus, Figma oturum açma işlemiyle doğrudan Figma hesabınıza bağlanır. Bağladıktan sonra bir çerçeve bağlantısı içe aktarın ve uygulamayı tanımlayın; ayrıca kurulacak veya çalıştırılacak ayrı bir Figma MCP sunucusu yoktur.
Figma Dev Mode veya ücretli bir Figma koltuğuna ihtiyacım var mı?
Hayır. Manus, Dev Mode yerine bağlı Figma hesabınız üzerinden çerçeveleri içe aktarır ve ücretsiz bir Figma hesabı bağlanabilir. Figma, uygulamaların dosyaları ne sıklıkla okuyabileceğini sınırlar: ücretsiz planlar ve Dev Mode olmayan koltuklar küçük bir aylık kota alır, Dev Mode içeren ücretli koltuklar ise çok daha yüksek sınırlara sahiptir. Sınıra ulaşırsanız Manus size bildirir.
Bir Figma to code AI iş akışı çalışan bir uygulama oluşturabilir mi?
Evet. Bir Figma çerçeve bağlantısı paylaşın ve uygulamayı tarif edin. Manus tasarımı analiz eder ve çalışan bir web uygulaması için ön yüzü ve gerekli arka uç bileşenlerini oluşturur.
Manus çok sayfalı tasarımları ve etkileşimleri işleyebilir mi?
Evet. Birden fazla Figma çerçevesi paylaşın ve bunların sayfa akışını, etkileşimlerini veya hover gibi bileşen durumlarını açıklayın. Bu, Manus'ın etkileşimli, çok sayfalı bir web deneyimi oluşturmasına yardımcı olur.
Dönüştürdükten sonra siteyi yayınlayabilir miyim?
Evet. Web uygulamasını önizleyin, Yayınla'ya tıklayın ve çevrimiçi olarak erişilebilir hale gelsin. Özel bir alan adı bağlayabilir ve değişiklikleri Manus'a tarif ederek düzenlemeye devam edebilirsiniz.
Bu, Figma Make'den nasıl farklıdır?
Figma Make, Figma'nın bir ürünüdür. Manus ile belgelenen süreç bir Figma çerçeve bağlantısı ve bir web uygulaması isteğiyle başlar: arka uç bileşenleri içerebilir, sonrasında siteyi yayınlayıp sohbet içinde düzenlemeye devam edebilirsiniz.
Figma to Flutter veya Figma to React Native çıktısını kullanabilir miyim?
Bu sayfa Figma'dan web uygulamasına dönüşümü kapsar. İçe aktarma kılavuzu, ön uç için HTML, CSS ve JavaScript'i belirtir; Flutter veya React Native çıktısını doğrulamaz.