Bu iş akışı oldukça mantıklı ve birçok e-öğrenme ekibi tarafından kullanılıyor. Figma'nın asıl değeri, görsel kararların geliştirme aracına geçmeden önce hızlıca verilip onaylanması. Ancak şunu baştan bilmek gerekir: Figma tasarımları Storyline'a doğrudan, düzenlenebilir slaytlar olarak aktarılamaz. Figma'yı tasarım ve onay aşamasında kullanıp görsel öğeleri dışa aktarırsınız.
Verimli bir akış için önerilerim:
- Çerçeve boyutunu sabitleyin. Figma'daki çerçeve (frame) boyutunu Storyline projenizin slayt boyutuyla birebir aynı yapın. Böylece konumlar ve ölçüler aktarımda korunur.
- Bir tasarım sistemi oluşturun. Düğmeler, onay kutuları, ilerleme çubukları, geri bildirim kutuları ve başlık alanları için bileşenler (components) hazırlayın. Düğmelerin normal, üzerine gelme, tıklanmış ve pasif hallerini varyant (variant) olarak tasarlayın. Bu haller Storyline'daki durumlara (states) birebir karşılık gelir.
- Renk ve yazı tiplerini stil ya da değişken olarak tanımlayın. Tasarımcı ile geliştirici aynı renk kodlarını ve yazı boyutlarını kullanmalı.
- Ekran şablonları hazırlayın: giriş, içerik, etkileşim, bilgi kontrolü, sonuç. Her modülde bu şablonlar tekrar kullanılabilir.
Aktarım aşaması:
- Arka planları ve görselleri PNG olarak, ikonları ise Storyline'ın desteklediği bir vektör formatında ya da yüksek çözünürlüklü PNG olarak dışa aktarın.
- Metinleri görsel içinde bırakmayın. Metinleri Storyline'da metin kutusu olarak oluşturun. Hem güncellemesi kolay olur hem de ekran okuyucular metne erişebilir.
- Düğmelerin metinsiz arka planını Figma'dan alın, metni ve etkileşimi Storyline'da ekleyin.
- Dışa aktarılan dosyaları tutarlı bir isimlendirme ile klasörleyin.
Figma'nın prototip özelliğini de değerlendirin. Ekranları tıklanabilir bir prototip olarak bağlayıp konu uzmanlarına ve paydaşlara gösterebilirsiniz. Akış ve tasarım üzerindeki geri bildirimleri geliştirme başlamadan almak, Storyline'da yapılacak revizyon sayısını ciddi ölçüde azaltır. Figma'nın yorum özelliği de bu aşamada işe yarıyor.
Sık yapılan hata, Figma'da çok detaylı animasyonlu prototipler hazırlayıp aynı şeyi Storyline'da yeniden kurmak. Bu iş tekrarına neden olur. Figma'da görünümü ve ana akışı onaylatın, etkileşimin detayını Storyline'da kurun.