Figma WordPress’e Nasıl Dönüştürülür (Başlangıç Kılavuzu)

Figma tasarımınızı bir WordPress temasına veya sayfasına dönüştürmenin bir yolunu mu arıyorsunuz?

Figma, web siteniz için çekici bir kullanıcı arayüzü oluşturmanızı sağlayan bulut tabanlı bir tasarım aracıdır. Prototip oluşturma yoluyla fikirleri hızlı bir şekilde test etmenizi sağlar ve ayrıca gerçek zamanlı işbirliğini destekler. Bu tasarımları WordPress’e dönüştürerek web sitenizi kullanıcılar için görsel olarak daha çekici hale getirebilirsiniz.

Bu makalede, Figma’yı WordPress’e nasıl kolayca dönüştürebileceğinizi adım adım göstereceğiz.

Figma’yı Neden WordPress’e Dönüştürmelisiniz?

Figma, web siteniz için güzel düzenler oluşturmanızı sağlar ve animasyon efektleri, prototip oluşturma, vektör düzenleme ve daha fazlası gibi harika araçlar sunar.

Bir WordPress web siteniz varsa, siteniz için bir düzen oluşturmak üzere bu aracı kullanmak, birden fazla tasarımcı ve geliştiricinin aynı Figma dosyası üzerinde çalışmasına olanak tanıyacaktır. Bu, işbirliğini geliştirebilir ve ileri geri e-postalara olan ihtiyacı azaltabilir.

Ayrıca, siteniz geliştirilmeye başlamadan önce kullanıcı akışlarını test etmek ve geri bildirim almak için blogunuzun etkileşimli maketlerini oluşturabilirsiniz.

Ayrıca Figma’nın ızgaralar, kılavuzlar, katmanlar ve otomatik düzenler gibi gelişmiş araçlarını kullanarak görsel olarak çekici sayfalar ve şablonlar oluşturabilirsiniz:

• Açılış sayfaları
• Ana sayfa, blog sayfası veya ürün sayfaları
• Bütün bir tema
• Mobil web sitesi düzenleri
• Gösterge tabloları ve kullanıcı arayüzleri
• E-posta şablonları ve haber bültenleri

Ancak Figma’nın varsayılan olarak WordPress ile entegre olmadığını unutmayın, bu nedenle bir dönüştürme aracı kullanmanız gerekecektir. Bununla birlikte, bir Figma tasarımının nasıl kolayca oluşturulacağını ve WordPress’e nasıl dönüştürüleceğini adım adım görelim:

Adım 1: Bir Figma Hesabı Oluşturun

Figma ile bir sayfa tasarlamak için öncelikle web sitesinde bir hesap oluşturmanız gerekecektir.

Bunu yapmak için Figma web sitesini ziyaret edin ve ekranın sağ üst köşesindeki ‘Ücretsiz başlayın’ düğmesine tıklayın.

Bu, pencerenizde e-posta adresinizi ve şifrenizi girmeniz gereken yeni bir sekme açacaktır.

Bundan sonra, ‘Hesap Oluştur’ düğmesine tıklayın.

Bunu yaptığınızda, size bir doğrulama e-postası gönderilecektir.

Bu e-postayı gelen kutunuzdan açmanız ve ‘E-postayı doğrula’ düğmesine tıklamanız yeterlidir.

Şimdi Figma web sitesine yönlendirileceksiniz ve burada size isminiz sorulacak.

Bundan sonra, aracı nasıl kullanmayı planladığınıza dair bazı ayrıntılar vermeli ve ardından alttaki ‘Devam Et’ düğmesine tıklamalısınız.

Daha sonra sizden bir fiyatlandırma planı seçmeniz istenecektir. Ücretsiz olan ‘Başlangıç’ planını seçebilir ve ‘Devam’ düğmesine tıklayabilirsiniz.

Adım 2: Figma’da Bir Sayfa Tasarlayın

Şimdi Figma kontrol panelinize yönlendirileceksiniz

Oraya vardığınızda, devam edin ve bir Figma sayfası oluşturmak için sağ üst köşedeki ‘Tasarım Dosyası’ düğmesine tıklayın.

Figma oluşturucu şimdi ekranınızda açılacaktır. Burada, üst kısımdan ‘Çerçeve’ seçeneğini seçmelisiniz.

Bu, sağ sütunda ‘Masaüstü’ seçeneğini seçmeniz gereken bir tasarım çerçeveleri listesi açacaktır. Bunun nedeni, Figma’yı WordPress’e dönüştürmek için kullanacağımız eklentinin şu anda yalnızca masaüstü tuvalini desteklemesidir.

Ardından, üstteki kare simgesine tıklayarak ve ‘Resim/video yerleştir’ seçeneğini belirleyerek tuvale resim ekleyebilirsiniz.

Bu, seçtiğiniz bir resmi veya videoyu yükleyebileceğiniz bilgisayar klasörünüzü açacaktır.

Ekranın üst kısmındaki ‘T’ simgesine tıklayarak da sayfanıza metin ekleyebilirsiniz.

Bunu yaptıktan sonra, sağ sütundaki ayarlardan metin boyutunu, hizalamasını, yazı tipini ve aralığını ayarlayabilirsiniz.

Ayrıca üst kısımdan ‘Kalem’ ve ‘Kurşun Kalem’ gibi ücretsiz stil araçlarını kullanabilir, geri bildirim soruları ekleyebilir, daha fazla katman ve sayfa oluşturabilir, arka plan rengini değiştirebilir ve çok daha fazlasını yapabilirsiniz.

Bir geliştiriciyseniz ve sayfaya CSS kodu eklemek istiyorsanız, bunu ekranın sağ üst köşesindeki geçişi kullanarak ‘Geliştirme Modu’na geçerek de yapabilirsiniz.

Adım 3: Figma Sayfasının API Anahtarını Kopyalayın

Figma sayfanızın özelleştirilmesinden memnun kaldığınızda, API anahtarını alma zamanı gelmiştir. Bu anahtar, eklentinin Figma sayfasını WordPress’e yerleştirmesine izin verecektir.

Bunu yapmak için ekranın sol üst köşesindeki ‘Figma’ simgesine tıklayın. Bu, Yardım ve hesap ” Hesap Ayarları seçeneğini seçmeniz gereken bir menü istemi açacaktır.

Şimdi ekranda yeni bir bilgi istemi açılacaktır.

Buradan, ‘Kişisel erişim belirteçleri’ bölümüne gidin ve ‘Yeni belirteç oluştur’ bağlantısını tıklayın.

Bu, oluşturmakta olduğunuz token için bir ad ve son kullanma tarihi sağlamanız gereken bazı yeni ayarlar açacaktır. Figma sayfasının belirli bir süre sonra web sitenizden kaybolmasını istemiyorsanız, token için ‘Sona Erme Yok’ seçeneğini belirlemenizi öneririz.

Bundan sonra, Dosya İçeriği dışındaki tüm kapsamları ‘Yaz’ olarak ayarlayabilir ve ardından ‘Belirteç oluştur’ düğmesine tıklayabilirsiniz.

Şimdi ‘Kişisel erişim belirteçleri’ bölümüne geri yönlendirileceksiniz.

Buradan, yeni oluşturulan belirteci kopyalayabilir ve Not Defteri’ne veya başka bir düz metin düzenleyicisine yapıştırabilirsiniz.

Adım 4: Figma’yı WordPress’e Dönüştürün

API anahtarını aldıktan sonra, şimdi Figma sayfanızı WordPress’e dönüştürme zamanı.

Bunu yapmak için Animation and Design Converter for Gutenberg Block eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için bir WordPress eklentisinin nasıl kurulacağına ilişkin başlangıç kılavuzumuza bakın.

Etkinleştirmenin ardından, Figma sayfasını eklemek istediğiniz sayfayı veya gönderiyi açın. Oraya geldiğinizde, ekranın üst kısmındaki ‘Figma’dan İçe Aktar’ düğmesine tıklamanız yeterlidir.

Bu, daha önce kopyaladığınız Figma sayfası erişim belirtecini yapıştırmanız gereken bir istem açacaktır.

Bundan sonra, Figma sayfası URL’sini ‘FIGMA DOSYA URL’si’ alanına eklemeniz gerekir.

Bu URL’yi almak için Figma dosyanızı açın ve tarayıcı sekmesindeki bağlantıyı kopyalayın. URL’yi kopyalamadan önce masaüstü çerçevesinin seçili olması gerektiğini unutmayın.

Bağlantıyı WordPress’e yapıştırdıktan sonra ‘İçe Aktarmayı Başlat’ düğmesine tıklayın.

Eklenti daha sonra Figma sayfanızı Grup bloğuna dönüştürecektir. Artık blok panelinden bloğun hizalamasını, konumunu, tipografisini ve rengini özelleştirebilirsiniz.

Bundan sonra, ayarlarınızı kaydetmek için ‘Yayınla’ veya ‘Güncelle’ düğmesine tıklayın.

Dönüştürülmüş Figma dosyası demo web sitemizde bu şekilde görünüyordu.

Alternatif: Figma’yı WordPress’e Dönüştürmek için Seahawk Medya Hizmetlerini Kullanın

Tüm web sitenizi Figma kullanarak oluşturduysanız, yukarıdaki yöntem uygun olmayacaktır çünkü eklenti yalnızca masaüstü çerçevesiyle çalışır.

Ayrıca, Figma sadece tasarıma odaklanırken WordPress dinamik içerik ve işlevsellik için kodlama gerektirdiğinden, eklenti karmaşık tasarımları doğru bir şekilde aktarmakta sorun yaşayabilir. Bu, Figma’da eklediğiniz bazı öğelerin WordPress’te çalışmayabileceği anlamına gelir.

Bu nedenle Figma’yı WordPress’e dönüştürmek için Seahawk Media hizmetlerini kullanmanızı öneriyoruz çünkü dönüşüm sırasında tüm bu faktörleri göz önünde bulunduruyorlar.

Seahawk Media, geliştirme, tasarım, bakım, taşıma, destek ve daha fazlası dahil olmak üzere çok sayıda hizmet sunan önde gelen bir WordPress hizmetleri şirketidir.

1000’den fazla işletme tarafından güvenilmektedir ve sizin için tamamen duyarlı, temiz kodlanmış, SEO’ya hazır ve piksel açısından mükemmel bir Figma – WordPress dönüşümü gerçekleştirecektir.

Tek yapmanız gereken Figma dosyalarınızı işletmeye göndermek.

İhtiyaçlarınızı anladıktan sonra Seahawk yaklaşık bir zaman çizelgesi belirleyecek ve Figma dosyalarınızı sadece birkaç gün içinde bir WordPress sitesine dönüştürecektir.

Şirketin hizmetlerini SEO denetimi, içerik yazma hizmetleri, beyaz etiket hizmetleri, destek ve saldırıya uğramış site onarımı için de kullanabilirsiniz.

Bonus: Görsel Olarak Çekici Bir Web Sitesi Oluşturmak için SeedProd’u Kullanın

Figma ile sayfalar oluşturmak ve daha sonra bunları WordPress’e dönüştürmek için çok fazla çalışmanız gerektiğini düşünüyorsanız, bunun yerine SeedProd ‘u kullanabilirsiniz.

Sürükle ve bırak yöntemini kullanarak web siteniz için özel temalar ve açılış sayfaları oluşturmanın süper kolay olduğu piyasadaki en iyi WordPress tema oluştur ucu ve sayfa oluştur ucudur.

SeedProd, kullanıcı dostu bir sürükle ve bırak oluşturucu, 300’den fazla önceden hazırlanmış şablon, gelişmiş WooCommerce blokları ve e-posta pazarlama hizmetleriyle entegrasyonlarla birlikte gelir.

Çekici bir sayfa oluşturmak için görselleri, başlıkları, videoları, CTA’ları, optin formlarını, eşantiyonları veya paragraf bloklarını oluşturucunun sol sütunundan kolayca sürükleyip bırakabilirsiniz.

Bunu yaptıktan sonra, sol sütunda ayarlarını açmak için eklediğiniz bloğa tıklamanız yeterlidir. Buradan dinamik metin ekleyebilir ve yazı tipi boyutunu, hizalamayı, rengi ve daha fazlasını değiştirebilirsiniz.

Son olarak, ayarlarınızı kaydetmek ve değişikliklerinizi canlı hale getirmek için üstteki ‘Kaydet’ ve ‘Yayınla’ düğmelerine tıklayın. Ayrıntılı talimatlar için WordPress’te açılış sayfası oluşturma eğitimimize göz atabilirsiniz.

Genel olarak eklenti hakkında daha fazla bilgi için SeedProd incelememize bakın.

Figma’yı WordPress’e Dönüştürme Hakkında Sıkça Sorulan Sorular

İşte okuyucularımız tarafından Figma ve WordPress hakkında sıkça sorulan bazı sorular.

Figma ve WordPress birlikte çalışıyor mu?

Varsayılan olarak, Figma ve WordPress doğrudan entegre olamaz. Ancak bir Figma tasarımını WordPress’e dönüştürmek için UiChemy, pxCode veya Animation and Design Converter for Gutenberg Block gibi araçları ve eklentileri kullanabilirsiniz.

Bu yöntem sizin için çok karmaşıksa, bu dönüşüm için bir geliştirici veya Seahawk Media gibi özel bir şirket kiralayabilirsiniz.

Figma’yı WordPress’e dönüştürmek için kodlama bilmem gerekiyor mu?

Figma tasarımlarını oluşturmak ve WordPress’e dönüştürmek için kodlama bilmenize gerek yok çünkü bunu bir eklenti ile kolayca yapabilir veya bir geliştirici kiralayabilirsiniz.

Ancak, bir eklenti olmadan kendiniz yapmak istiyorsanız, web sitenizi elle kodlamak için HTML, CSS ve muhtemelen PHP bilmeniz gerekir. Bunun nedeni, Figma tasarım öğelerinden bazılarının WordPress’te işlevsellik sağlamak için kodlanması gerekecek olmasıdır.

Daha fazla ayrıntı için, bir web sitesinin nasıl kodlanacağına ilişkin kılavuzumuza bakın.

Figma’dan WordPress’e dönüştürmek SEO’ya (Arama Motoru Optimizasyonu) zarar verir mi?

Bir Figma tasarımını WordPress’e dönüştürürseniz, içeriğiniz veya geri bağlantılarınız etkilenmez. Ancak Figma tasarımları web sitenizin yapısını, sayfa hızını ve görselleri olumsuz etkileyebilir.

Bu nedenle Figma’dan WordPress’e dönüşüm için Seahawk Media hizmetlerini kullanmanızı öneriyoruz çünkü dönüşümden sonra web sitenizin tamamen duyarlı, temiz kodlanmış ve SEO’ya hazır olduğundan emin olacaklardır.

Umarız bu makale Figma’yı WordPress’e nasıl dönüştüreceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress geliştirme için dış kaynak kullanımına ilişkin yeni başlayanlar kılavuzumuza ve web siteniz için özel logo alabileceğiniz en iyi yerler için en iyi seçimlerimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.