PROFESYONEL İPUCU: Bir tasarımın Figma’dan Webflow’a aktarılmasının beklenmeyen değişikliklere veya veri kaybına neden olabileceğini lütfen unutmayın. Herhangi bir aktarım türü gerçekleştirmeden önce her zaman verilerinizi yedekleyin.
Figma, web tasarımcıları ve geliştiricileri tarafından arayüz tasarımları ve çizimler oluşturmak için kullanılan bir vektör grafik düzenleyici ve tasarım aracıdır. Webflow, kullanıcıların kod yazmadan duyarlı web siteleri oluşturmasına olanak tanıyan bir web sitesi oluşturucusudur. Bu yazımızda sizlere Figma’dan Webflow’a nasıl tasarım aktarılacağını göstereceğiz.
Öncelikle editörde Figma tasarımınızı açın. Ardından, Webflow’a aktarmak istediğiniz öğeyi seçin. Bunu yapmak için, Katmanlar panelinde katmana tıklayın veya Seçim aracını kullanın.
Elemanı seçtikten sonra, üst araç çubuğundaki Dışa Aktar düğmesini tıklayın. Bu, Dışa Aktar açılır penceresini açacaktır.
Biçim açılır menüsünde SVG’yi seçin. Ardından, Dışa Aktar düğmesine tıklayın.
Öğeniz bir SVG dosyası olarak dışa aktarılacak. Bu dosyayı Sublime Text veya Atom gibi bir metin düzenleyicide açın. Kodu kopyalayın ve Webflow projenize yapıştırın.
Webflow projenizde + işaretine tıklayın ve ardından menüden Göm’ü seçin. Bu, Gömme Kodu açılır penceresini açacaktır. Kodunuzu bu pencereye yapıştırın ve Göm düğmesine tıklayın.
Öğeniz şimdi Webflow projenize eklenecek. Stil panelini kullanarak veya doğrudan projenize CSS kodu ekleyerek stil verebilirsiniz.
Bir Tasarımı Figma’dan Webflow’a Nasıl Aktarırım?
Bir tasarımı Figma’dan Webflow’a aktarmak için önce Figma tasarımınızı editörde açın ve aktarmak istediğiniz öğeyi seçin. Üst araç çubuğundaki ‘Dışa Aktar’ düğmesini tıklayın ve ‘Dışa Aktar’ açılır penceresinde görünen açılır menüden SVG’yi seçin.
Öğeniz, daha sonra Sublime Text veya Atom gibi bir metin düzenleyicide açabileceğiniz bir SVG dosyası olarak dışa aktarılacaktır. Kodu buradan kopyalayın ve + işaretini tıklayıp menüden ‘Göm’ü seçerek Webflow projenize yapıştırın. Öğeniz, Stil panelini kullanarak veya doğrudan projenize CSS kodu ekleyerek stil verebileceğiniz projenize eklenecektir.