Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Figma, web siteniz için çekici bir kullanıcı arayüzü oluşturmanızı sağlayan bulut tabanlı bir tasarım aracıdır. Prototipleme 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. Yine de bu sürecin biraz zorlu olabileceğini unutmayın.

Yıllar boyunca, çok sayıda web sitesinin işletmeleri için estetik açıdan hoş ve benzersiz bir düzen oluşturmak için Figma’yı kullandığını gözlemledik. Bu, sitenizin görünümünü özelleştirmek için bu yaklaşımın güçlü ve zayıf yönlerini daha iyi anlamamıza yardımcı oldu.

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

Convert Figma to WordPress

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.

Click Get started for free button on Figma

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.

Create an account on Figma

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.

Click Verify Email button to verify your email account for Figma

Ş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.

Select Figma free plan

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.

Click Design File button on the Figma dashboard

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.

Choose desktop as Figma frame

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.

Add an image or video to the Figma page

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.

Add text in Figma

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.

Customize your Figma page

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.

Open the account settings prompt

Ş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.

Click the Generate New Token link

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.

Add an access token name and expiration date according to your liking

Ş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.

Copy the access token

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 WordPress eklentisi yükleme 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.

Click Import from Figma button

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.

Copy the Figma page URL

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.

Figma file will now be converted into the Group block

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.

Figma to WordPress conversion preview

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 yalnızca 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.

Seahawk Media Figma to WordPress conversion

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.

Figma to WordPress conversion steps

Ş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.

Piyasadaki en iyi WordPress tema oluşturucu ve sayfa oluşturucudur. Kullandığınızda, basit sürükle ve bırak teknolojisi ile kolayca özel temalar ve açılış sayfaları oluşturabilirsiniz.

SeedProd Website and Theme Builder

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.

Landing page will be launched on the screen

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 Figma eklentilerini ve pxCode, UiChemy veya Animation and Design Converter for Gutenberg Block gibi araçları kullanarak bir Figma tasarımını WordPress’e dönüştürebilirsiniz.

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

4 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Prajwal Shewatkar

    This saved me a tonne of manual work. Thanks for the amazing post WPbeginner. But I belive this is not an official plugin by figma, is it?

    • WPBeginner Support

      Correct, the plugin is not handled by Figma at the moment but not all plugins need to be ran by the original tool. :)

      Yönetici

  3. Arafath Ahmed

    Thanks for providing the alternative option that is Seahawk, I was looking to find a way to convert some designs/ideas I made on Figma onto WordPress. I thought it would’ve been a lot of hassle to deal with this otherwise!

    Once again,
    Many Thanks

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.