Tasarımınızı dışa aktarma
1
Tasarımınızı açın
Flowstep içinde dışa aktarmak istediğiniz tasarıma gidin.
2
Dışa aktarma menüsünü açın
Araç çubuğu veya tasarım panelinde dışa aktarma seçeneğini bulun. Dışa aktarma ayarlarını açmak için seçin.
3
Formatınızı seçin
Kullanım durumunuza bağlı olarak JPG veya PNG seçin (karşılaştırma için aşağıya bakın).
4
Dosyayı indirin
Seçiminizi onaylayın ve dışa aktarılan görüntüyü cihazınıza indirin.
JPG ve PNG: hangi formatı kullanmalısınız?
Dışa aktarma kodu
Görüntülerin ötesinde, Code düğmesi tasarımınızı React + Tailwind kodu olarak dışa aktarır — bir kod parçasını kopyalayın veya tüm paketi ZIP olarak indirin. Tek bir ekranı, birkaç seçili ekranı veya tüm dosyayı aynı anda dışa aktarabilirsiniz. Birden fazla ekranı dışa aktardığınızda, her biri kendi bileşen dosyası olur ve ekranlar arasında ayarladığınız tüm gezinti, oluşturulan koda bağlanır, böylece dışa aktarılan uygulama baştan sona tıklanabilir. Paketler bağımsızdır: tasarımda kullanılan görüntüler (sohbet panelinde eklediğiniz olanlar dahil)public/assets/ klasörüne dahil edilir ve kod bunlara yerel yolla başvurur, böylece dışa aktarma olduğu gibi çalışır.
İndirilen dosyalar — görüntüler ve kod paketleri — ait oldukları ekranın adıyla adlandırılır (ekran adı yoksa dosya adına geri döner), bu da birçok ekranla çalışırken dışa aktarmaları tanımlamayı kolay tutar.
Tasarımları kodlama ajanına gönderin
Bir dosyayı indirmek yerine, tasarımı doğrudan bir yapay zeka kodlama asistanına teslim edebilirsiniz. Araç çubuğunda Send to your coding agent düğmesine tıklayın — veya dışa aktarma iletişim kutusunu açın ve aynı seçeneği seçin — ajanınız için kopyalanmaya hazır bir istem oluşturmak için:Ajanınız bu ekranları MCP üzerinden okur ve bunları depo içinde oluşturur. Bu istemi Claude, Cursor veya tercih ettiğiniz ajanınıza yapıştırın.İstem, ajanınıza Flowstep MCP sunucusu üzerinden ekranları getirmesini ve bunları kod tabanınızda yeniden oluşturmasını söyler. Tek bir ekranı, birkaç seçili ekranı veya tüm dosyayı aynı anda teslim edebilirsiniz — istem seçtiğiniz şeye uyarlanır. Bu, Flowstep MCP sunucusunu kullanır, bu nedenle önce bir MCP istemcisini bağlayın. Desteklenen istemciler için MCP sunucusu özeti ve bir tanesini bağlamak için Hızlı Başlangıç bölümüne bakın.
Tasarımınızı bir vektör düzenleme akışına götürmeniz gerekiyorsa, bunun yerine doğrudan Figma’ya kopyalayın. Flowstep tasarımlarını Figma’ya anında kopyalayın sayfasına bakın.