Flowstep ve Figma tamamlayıcı araçlardır, rakip değildir. Flowstep, hızlı bir şekilde UI tasarım fikirlerini oluşturmanıza ve keşfetmenize yardımcı olur; Figma, üretim için hazır işleri iyileştireceğiniz, işbirliği yapacağınız ve geliştireceğiniz yerdir. Her ikisini birlikte kullanmak size en iyi sonucu verir.
Flowstep tasarımını Figma’ya kopyalamak
1
Flowstep'te bir veya daha fazla ekran seçin
Bir ekrana tıklayarak seçin — veya hepsini aynı anda kopyalamak için birden fazla ekran seçin. Seçimin tuval üzerinde vurgulandığından emin olun.
2
Seçimi kopyalayın
Mac’te **Cmd+**⇧+C veya Windows’ta **Ctrl+**⇧+C tuşlarına basın. Flowstep, çalışırken “Preparing your design — stay on this tab and keep the screen selected” mesajını gösterir; kopyalama bir an içinde tamamlanır.
3
Figma dosyanıza yapıştırın
Figma’ya geçin ve tasarımı yerleştirmek istediğiniz dosyayı açın. Mac’te Cmd+V veya Windows’ta Ctrl+V tuşlarına basarak yapıştırın. Flowstep ekranları Figma tuvalinizde düzenlemek için hazır halde görünür.
Figma’ya kopyalama, tarayıcınızın panosunu kullanır, bu nedenle tarayıcı Flowstep’e pano erişimi izni vermelidir — izin hatasını görürseniz, tarayıcı ayarlarında pano erişimine izin verin ve yeniden deneyin. Kopyalama sırasında sekmeleri değiştirmek aktarımı kesintiye uğratır; kopyalama bitene kadar Flowstep sekmesini odakta tutun.
Figma’dan bir tasarımı içe aktarın
Diğer yönde de gidebilir ve bir Figma çerçevesini Flowstep’e düzenlenebilir ekranlar olarak taşıyabilirsiniz. İçe aktarma herkese açıktır — Figma hesabınızı bir kez bağlayın, ardından bir çerçeve bağlantısından içe aktarın.1
Figma'yı bağlayın
Ayarlarınızdan Figma hesabınızı Flowstep’e bağlayın. Flowstep, erişiminiz olan dosyaları okumak için Figma’nın yetkilendirmesini kullanır.
2
Figma'da bir çerçeve bağlantısı kopyalayın
Figma’da taşımak istediğiniz çerçeveye sağ tıklayın ve Copy link to selection öğesini seçin. Tüm üst düzey çerçeveleri aynı anda içe aktarmak için bir sayfanın tamamına bağlantı da kopyalayabilirsiniz.
3
Flowstep'e içe aktarın
Flowstep araç çubuğunda Figma içe aktarma seçeneğini kullanın ve bağlantıyı yapıştırın. Flowstep çerçeveyi tuvalinizde düzenlenebilir öğelere dönüştürür. Aynı çerçeveyi yeniden içe aktarmak bunu yerinde günceller.
Ne içe aktarılır
Flowstep, bir Figma çerçevesini yerel ve düzenlenebilir öğeler olarak yeniden oluşturur — düz bir görüntü değil. Bir içe aktarma aşağıdakileri sağlar:- Çerçeveler ve iç içe katmanları
- Metin, ağırlık, renk ve kalın gibi karakter başına stil de dahil olmak üzere
- Figma değişkenlerinizden renkler
- Görüntü dolgular ve SVG simgeleri ve şekilleri
- Düşür ve iç gölgeler ile katman ve arka plan bulanıklığı
- Kesikli ve noktalı çizgiler
Dosyanın organizasyonunun Figma’sı bağlı olması gerekir. Bir çerçeve içe aktarılamazsa, Flowstep, ne yapmanız gerektiğini söyleyen işlem yapılabilir bir mesaj gösterir — örneğin, yetkilendirmenizin süresi dolmuşsa Figma’yı yeniden bağlayın, Figma hız sınırlaması yapıyorsa veya yavaşsa bekleyin ve yeniden deneyin veya Topluluk şablonu için önce onu takımınıza çoğaltın ve yeni bağlantıyı yapıştırın.