Şimdi proje isteğinde bulunun
Figma'da prototip oluşturmanın ötesine geçmeye hazır olduğunuzda, Webflow tasarımlarınızı kodlamadan hayata geçirmenize yardımcı olmaya hazır. (Bu konuda biz de hizmet veriyoruz)
Figma'nın ne kadar sürede sektör standardı bir araç olduğunu hepimiz biliyoruz. Konu tasarımı işe yarar bir hale getirmek olduğunda şüphesiz ki webflow devreye giriyor. Bu yazıda amiyane tabir ile figma to webflow işleminin nasıl gerçekleştirildiğine göz atacağız.
Figma'da harika bir tasarımınız var ve şimdi bunu Webflow'da hayata geçirmek istiyorsunuz. Bu konuda tecrübesizseniz, korkmayın: Figma, Sketch gibi tasarım araçlarına çok benzer, ancak hızlı bir şekilde çalışmaya başlamanıza yardımcı olacak birkaç özellik var.
Webflow'ta site oluşturmanın ilk adımı yeni bir proje oluşturmaktır. Bu, tıpkı bir Figma dosyası oluşturmak gibi çalışır, oldukça kolay bir işlemdir. Sadece sağ üst köşedeki mavi düğmeye tıklayın ve sıfırdan başlayın.
Yeni bir sitede ilk yaptığımız şey global tarzlarımızı tanımlamaktır. Genel stiller, paragraf stili, başlıklar ve bağlantı görünümü gibi her web sitesinin ihtiyaç duyduğu tüm varsayılan şeylerdir. Figma belgelerinin genel olarak eksiksiz bir stil kılavuzu vardır, ancak projeniz yoksa, tüm temel stillerinizin kullanıma hazır olması için bir tane yapmak isteyebilirsiniz.
Webflow tarafında, stil kılavuzunuzun temeli olarak kullanmak üzere HTML etiketleri şablonunu kopyalayıp sitenize yapıştırabilirsiniz. Bunu yapmak için yukarıdaki siteyi klonlayın.
Bedava Taktik(biz de özel müşterilerimiz için kullanıyoruz, birlikte çalışmak için tıklayın.): HTML etiketleri şablonundan yeni projenize kopyalayıp yapıştırmayı kolaylaştırmak için her projeyi ayrı bir sekmede açın - evet, aynı anda iki Webflow oturumu çalıştırabilirsiniz.
Global bir stil tanımlamak için menüden öğeyi seçin ve ekranın sağ üst köşesindeki sınıf seçici (selector olarak geçer) alanına tıklayın. Seçtiğiniz öğe global olarak tanımlanabiliyorsa, etiket adında "All" olan mor renkli bir seçenek görürsünüz. (Örnekler: Body (All Pages), All H3 Headings) Şu şekilde görünecekler:
Temel sınıfları şekillendirmek hem işinizden tasarruf etmenizi sağlar hem de sitenizin stil sayfasını daha hafif ve daha kolay yönetilebilir tutar. İsterseniz bu öğelerden herhangi birini atlayabilirsiniz(biz. asla atlamıyoruz), ancak en azından Body (All Pages) üzerinde temel yazı tipi stilini tanımlamanızı şiddetle tavsiye ederiz. Yazı tipinizi yalnızca bir kez tanımlamanız gerekeceğinden, bu size yolda çok zaman kazandıracak ve siz veya müşteriniz fikrinizi değiştirirseniz daha sonra değiştirmek çok kolay.
Yazı tipi değişikliklerinin ne kadar kolay olacağı aşağıda bir örnekle gösteriliyor:
Özel yazı tiplerinden bahsetmişken, kullanmakta olduğunuz yazı tipi varsayılan listede değilse, şimdi proje ayarlarına atlamanın ve bu bir Google Yazı Tipini listeden seçmenin tam zamanı.
Bir Google Yazı Tipi değilse, TTF veya OTF dosyasını yükleyin ve istediğiniz ağırlıkları seçin.
Bir bedava taktik daha: Yazı tipleri çok yer kaplar, bu nedenle sitenizin performansını optimize etmek istiyorsanız, gerektiği kadar az ağırlık seçin. Birkaç yüz kilobayt gereksiz bir değişiklik gibi görünebilir, ancak bu yükleme süresini azaltmak için mümkün olduğunda ağırlığı azaltmak en iyisidir.
Şimdi stil rehberine geri dönelim. Önerdiğimiz şablonu kullanıyorsanız, bu bir çırpıda olmalı. Figma dosyanızla eşleşmesi için sayfadaki her şeyi tanımlamanız yeterlidir. Figma takım stillerini kullanıyorsanız, işleri benzer şekilde organize etmek size oldukça yardımcı olur.
Temel stiller tanımlandıktan sonra, tüm özel renklerinizi eklemenin tam zamanı. Bir veya iki tane varsa, bu hızlı birişlemdir, ancak çok varsa, bu sıkıcı olabilir. Bunu genellikle bir renk bloğu div ekleyerek ve ardından tüm renk örneklerim Webflow'ta olana kadar rengini tekrar tekrar değiştirerek yapabilirsiniz.
Artık global stillerinizi tanımladığınıza göre, tüm varlıkları Figma dosyanızdan dışa aktarmanın zamanı geldi.
Çalışırken görüntüleri, simgeleri ve diğer dosyaları dışa aktarmak için işaretleme konusunda titiz davrandıysanız, dışa aktarma diyaloğunu getirmek için hiçbir şey seçilmeden Command/Control + Shift+ E tuşlarına basın. Export tuşuna basın ve bittikten sonra Figma tüm bu dosyaları nereye kaydedeceğini soracaktır(uygulama kullandığınızı varsayıyoruz). Yalnızca belirli bir üst çerçevedeki varlıklar gibi, dışa aktardığınız şeyi kısıtlamak istiyorsanız, o çerçeveyi seçin ve aynı kısayolu kullanın.
Bir Bedava Taktik Daha: Webflow'a yeni gelen bir özellik olan, webflow'a aktardığınız görselleri WebP formatına da çevirebilirsiniz. Bunun için harici bir program kullanmanıza gerek yok.
Bu aşama en kritik ve en önemli aşama. Kullanacağınız yaklaşım oldukça önemli, web sitelerinin içerisinde bulunan komponentlerin 'div block' denen birimlerden oluştuğunu bilmeniz gerekiyor. OBK studio olarak bakımı kolay, anlaşılabilir ve yüksek SEO puanları alan bir yapı kurmak için çeşitli yaklaşımlar kullanıyoruz. Basitçe özetlemek gerekirse:
Yukarıdaki görselden anlaşılabileceği gibi, temel elemanları tutan 'section' komponentleri sitenin en temel ve ağacın en tepesindeki birim. Hemen ardından 'container' komponenti göze çarpıyor. Containerlar içinde bulundukları sectionlara daha sıkı bir yapı kazandırıyor. İçeriklerin bir arada bulunmasını sağlıyor.
Artık yapıyı kurduğumuza göre, yapı içinde bulunan birimlere stil verme vaktimiz geldi. Bunu CSS ile yapıyoruz, her class'ın kendine göre belirlenmiş birtakım stilleri var ve tamamen özelleştirilebilirler.
Örneğin, bir classı "Black Heading" olarak adlandırmak yerine, "All H1 Headings" +"Black Text" birleşik sınıfı oluşturmayı deneyin. Bu, başlık h1 classınızınrenkten bağımsız olarak boyut, ağırlık ve konumlandırma ile ilgienmesini sağlayacaktır. Ardından, özel kullanım durumunuz için rengi (veya diğer özellikleri) değiştirmek için ikincil bir sınıf ekleyebilirsiniz.
Başlamadan önce hızlı bir not: Webflow mobile-first değildir. Bu, geliştirmeye masaüstü sürümünden başlamanız gerektiği anlamına geliyor. Tasarımlarınızı mutlaka sırasıyla, masaüstü, tablet ve mobil için yapın.
Çoğu zaman, siteler mobilde ve masaüstünde tamamen farklıdır. Her kesme noktası(breakpoint) için öğeleri gizlemek ve göstermek için sürekli olarak cazip olacağınız için bu, hızlı bir şekilde kafa karıştırıcı olabilir. Display özelliğini yok olarak değiştirerek Webflow öğeleri gizleyebilirsiniz.
Sitenizin Webflow Designer içindeki görünümü, deneyimlerime göre, gerçek dünyada nasıl görüneceğine göre yaklaşık %95 ila %99 oranında doğrudur. (Bakın %100 demiyoruz.)
Sitenizi yayına aldıktan sonra(tercihen ana domanininiz yerine öncelikle weblfow uzantılı domaininizde):
test edin.
