Figma'yı WordPress'e Nasıl Dönüştürürüm? [Ücretsiz ve Ücretli Yollar]

Figma en çok bir tasarım ve yaratıcılık aracı olarak bilinirken, WordPress esnekliği, kişiselleştirilmesi ve kullanım kolaylığıyla ünlüdür. Çarpıcı bir web sitesi oluşturmak için bu platformların en iyilerini birleştirebilseydiniz ne olurdu?

Evet mümkün. Web sitenizi Figma kullanarak tasarlayabilir ve ardından WordPress'e dönüştürebilirsiniz. Bu, bir zamanlar HTML işlemeyi ve önceden yüklenmiş temaları içeren göz korkutucu bir görev olmasına rağmen, artık işler çok daha kolay hale geldi.

Siz de aynısını arıyorsanız doğru yerdesiniz.

Bu yazımızda, Figma'yı çok kolay, başlangıç ​​seviyesi dostu bir şekilde, herhangi bir teknik uzmanlık gerektirmeden WordPress'e nasıl dönüştürebileceğiniz konusunda size rehberlik edeceğiz.

Seçenek 1: Figma'yı WordPress'e dönüştürmek için Ücretsiz Eklenti kullanın

Figma'yı WordPress'e dönüştürmenin birden fazla yolu olmasına rağmen, ücretsiz yöntemi seçebilir, premium dönüştürme eklentisini kullanabilir veya manuel yöntemi kullanabilirsiniz. (Artıları ve eksileri var)

Adım 1: Öncelikle daha sonra WordPress’e dönüştürmek istediğiniz bir Figma tasarımı oluşturmalısınız. Ancak sektördeki en iyi uygulamaları ve tasarım ilkelerini takip etmeyi asla unutmamalısınız.

Adım 2: Figma sayfasını başarıyla oluşturup tasarladıktan sonra API anahtarını oluşturmanın zamanı geldi. Bu API anahtarı, Figma sayfasının Eklenti aracılığıyla getirilmesine ve WordPress'e yerleştirilmesine yardımcı olacaktır.

Bunun için ekranın sol üst kısmında yer alan Figma ikonuna tıklayın. Yardım ve Hesap> Hesap ayarları'nı seçmeniz gereken Menü seçeneklerini açacaktır.

“Kişisel Erişim belirteçleri” bölümüne kaydırmanız ve Yeni belirteç oluştur bağlantısını tıklamanız gereken yeni bir bilgi istemi açılacaktır.

Ayrıca, oluşturduğunuz token için ad ve son kullanma tarihi gibi bazı temel ayrıntıları vermenizin isteneceği yeni bir bilgi istemi açılacaktır.

Not : Figma sayfanızın belirli bir süre sonunda web sitenizden kaybolmaması için Sona Erme kısmında daima “ Sona Erme Yok ” seçeneğini seçin.

Bunun altında tüm Kapsamları “Yaz” olarak ayarlayın ve “Belirteç oluştur” düğmesine tıklayın. Oluşturulan jetonu kolayca kopyalayıp Not Defteri'ne veya herhangi bir düzenleyiciye kaydedebileceğiniz “Kişisel Erişim Jetonu” bölümüne yönlendirileceksiniz.

Adım 3: Artık jetonu başarıyla oluşturup kaydettiğinize göre, Figma sayfanızı WordPress'e dönüştürmenin zamanı geldi.

Sürece başlamak için, WordPress sitenize “Gutenberg Block için Animasyon ve Tasarım Dönüştürücü – Gelişmiş Eklentiler” adlı basit ama güçlü bir WordPress eklentisini kurmanız ve etkinleştirmeniz gerekir.

Başarılı kurulum ve aktivasyondan sonra, WordPress sitenizin sayfasını veya tasarladığınız Figma sayfasını eklemek istediğiniz gönderiyi açın.

O sayfada veya gönderide ekranın sol üst kısmındaki “ Figma'dan İçe Aktar ” butonuna tıklayın.

Daha önce oluşturduğunuz ve kaydettiğiniz “Figma Erişim Simgesini” sağlamanızı isteyen bir bilgi istemi açılacaktır. Figma Dosya URL'sini girin.

Figma Dosya URL'si için Figma Dosyanıza geri dönün, URL'yi aşağıdaki tarayıcı Sekmesinde kopyalayın ve Figma Dosya URL'si kutusuna yapıştırın.

Geri kalanı için Eklenti işini yapacak ve Figma dosyasını WordPress bloklarına dönüştürecektir. Bundan sonra blok panelinden istediğiniz kadar özelleştirme yapabilirsiniz.

İşiniz bittiğinde, ayarlarınızı kaydetmek için “Yayınla” veya “Güncelle” düğmesine tıklayın.

Seçenek 2: Figma'yı WordPress'e dönüştürmek için Ücretli Bir Eklenti kullanın (Daha verimli ve Sorunsuz)

Bu yöntem için daha popüler ve etkili bir dönüştürme eklentisi olan 'Uichemy'yi kullanacağız. Bu eklenti, sorunsuz ve basit bir iş akışı sunarak dönüştürme sürecini kusursuz hale getirir. Kodlama uzmanlığı olmayan yeni başlayanlar ve süreçlerini hızlandırmak isteyen geliştiriciler için en uygunudur.

Şu anda bu eklenti yalnızca Figma tasarımlarını Elementor ve Bricks web sitesi editörlerine dönüştürebiliyor ancak şirket gelecekte Gutenberg blokları için destek getirme sözü verdi.

Adım 1: Figma tasarımınızı açın ve dönüştürme işlemini başlatmak için Figma kontrol paneline Uichemy eklentisini yükleyin.

• Bunu yapmak için arama çubuğunda “ UiChemy ” ifadesini arayın ve UiChemy eklentisini bulun.

“Haydi Başlayalım” butonuna tıklayın ve Kurulum ve Aktivasyon talimatlarını takip edin.

• Etkinleştirmeyi tamamlamak için seri anahtarınızı girin. (Seri anahtar için 'Ücretsiz Başla' butonuna tıklayarak ücretsiz bir hesap oluşturun. Hesabınızı oluşturduktan sonra lisans anahtarınızı Posimyth Store hesabınızın kontrol panelinde bulacaksınız.)

Adım 2: Başarılı aktivasyondan sonra WordPress’e dönüştürmek istediğiniz Figma tasarımını veya Çerçevesini seçin ve açılan pencerede “ Elementor’a Dönüştür ” butonuna tıklayın.

(Dönüştürme işleminden önce WordPress sitenize Elementor Eklentisini kurup etkinleştirdiğinizden emin olun ve ayrıca Figma tasarımınızı dönüştürmeden önce tüm koşulları okuyun).

Adım 3: Artık Sitenizin URL'sini ve belirteç anahtarını girerek tasarımınızı önizleyebilirsiniz. Eğer istemiyorsanız doğrudan “Elemetor'a Dönüştür” butonuna tıklamanız yeterli. (Belirteç anahtarınızı ve web sitesi URL'nizi oluşturma konusunda rehberlik için UiChemy'nin “Canlı Önizleme Nedir” konulu eğitimine bakın.)

Adım 3: Tasarımınız dönüştürülecek ve JSON dosyası indirilecektir.

Şimdi WordPress Yönetici kontrol panelinizi açın > Şablonlara gidin > Kayıtlı Şablonlar.

Şimdi sayfanın üst kısmındaki “ Şablonları İçe Aktar ” butonuna tıklayın ve JSON dosyasını yükleyin.

Adım 4: Tebrikler! Figma tasarımınız artık 'Kayıtlı Şablonlar' bölümünde görünecek ve burada onu açabilir ve daha fazla düzenleme veya özelleştirme yapabilirsiniz.

Adım 5: Özelleştirme veya düzenlemeleri tamamladıktan sonra tasarımınızı ön uçta görüntüleyin. Tüm resimlerin ve düğmelerin doğru şekilde hizalandığından ve düzgün çalıştığından emin olun. Ayrıca tasarımın tüm ekran boyutlarında duyarlı olup olmadığını kontrol edin.

Seçenek 3: Figma'yı Manuel Olarak WordPress'e Dönüştürme (Geliştiriciler İçin)

Bu yöntem oldukça tekniktir, bu nedenle WordPress CMS hakkında iyi bilgi ve biraz sabır gerektirir, bu nedenle kodlamayı sevenler için en uygunudur.

Adım 1: İlk adım, simgeler ve resimler gibi tüm tasarım parçalarını Figma'dan dışa aktarmaktır. Bunun için Figma Design'ınızı açın ve neyi dışa aktarmak istediğinizi seçin. Şimdi “Dışa Aktar” düğmesine tıklayın ve doğru formatı ve çözünürlüğü bölümlere ayırın.

Not: Görüntüleri dışa aktarırken kaliteyi korumak için PNG veya JPG'yi seçmeniz, simgeler ve vektörler için ise SVG'yi seçmeniz önemle tavsiye edilir. Ayrıca dosyalarınızı dışa aktarırken dikkatli olun ve bunların doğru formatta olduğundan emin olun, aksi takdirde web sitenizin görünümü ciddi şekilde etkilenir.

Adım 2: Şimdi tüm Figma tasarımlarını bir WordPress sitesine dönüştürmek için özel bir WordPress teması oluşturmamız gerekiyor. Bunun nedeni, web sitenizin nasıl göründüğünü ve çalıştığını kontrol eden şeyin bir WordPress teması olmasıdır.

Tipik bir WordPress tema dosyası PHP kodu, JavaScript dosyaları ve CSS stil sayfası dosyalarından oluşur.

• WordPress'te temanız için wp-content/themes dizininde yeni bir klasör oluşturun ve onu istediğiniz şekilde adlandırın. (Bu dosyalara Cpanel, WordPress Düzenleyici veya FTP istemcileri aracılığıyla erişebilirsiniz) Veya "WordPress teması nasıl kurulur?" başlıklı özel blogumuza göz atın.

Eğer bir WPOven kullanıcısı iseniz bu eğitimi takip ederek WordPress dosyasına erişebilirsiniz. “Sitenizin dosya ve klasörlerini kolayca yönetmek için yeni Dosya Yöneticisi.”

Şimdi index.php, başlık.php, footer.php ve function.php gibi dosyaları buna ekleyin. (Bu dosyaları şimdilik boş bırakın). Ayrıca temanızın CSS stil sayfasını aynı klasöre ayarlamak için style.css dosyasını ekleyin.

(Bu özel style.css dosyası, web sitesinin tüm renklerinin, yazı tiplerinin, kenarlıklarının, kenar boşluklarının ve diğer görsel öğelerinin görüntülenmesinden sorumludur.)

Şimdi aşağıdaki başlık yorumunu aşağıda verildiği gibi style.css dosyanıza ekleyin:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Burada, özel WordPress temanızın Tema Adını ve Yazarınızı belirtmeniz gerekir. Bu, WordPress'in özel temanızı tanımlamasına yardımcı olacaktır.

Ayrıca WordPress temanız için bir resim eklemeyi de unutmayın, böylece tıpkı bir YouTube küçük resmi gibi WordPress dizininde kolayca tanınabilir.

Tercih edilen boyut 800×600 piksel olmalı ve PNG formatında olmalıdır. İstediğiniz herhangi bir şeye isim verin ve onu tema klasörüne ekleyin.

Adım 3: Artık dışa aktarılan tüm Figma varlıklarınızı özelleştirilmiş tema klasörünüze eklemeliyiz.

İpucu: Siteniz karmaşıksa, tüm varlıklarınızı aşağıdaki resimde gösterdiğimiz gibi belirli bir alt klasörde yönetmek daha iyidir:

Adım 4: WordPress temanızı tamamen işlevsel hale getirmek için tema dosyalarına HTML, CSS ve JavaScript eklemeniz gerekir.

Bunu nasıl yapabileceğinizi görelim,

Öncelikle Figma maketlerinizi koda dönüştürmeniz gerekiyor ve bunun için de bir kod düzenleme aracına sahip olmanız gerekecek.

Üstbilgiler, altbilgiler, gezinme çubukları ve bölümler gibi öğeler içeren bir HTML yapısı oluşturarak başlayın. Kodlarınızı PHP dosyalarına (index.php, başlık.php ve altbilgi.php) ekleyin.

Şimdi HTML öğelerinize stil vermek için CSS'yi kullanın. Renkleri, yazı tiplerini, boyutları ve diğer tasarım özelliklerini ayarlayarak stillerinizi 'style.css' dosyasına ekleyin.

• Daha iyi şekillendirme için şunları kullanabilirsiniz:
  • SASS veya LESS gibi CSS ön işlemcileri
  • Bootstrap veya Tailwind gibi çerçeveler
  • Bir WordPress başlangıç ​​teması
• Karmaşık tasarımlar için, tüm CSS'nizi tek bir dosyaya değil, daha organize bir şekilde yerleştirmeniz gerekir. Gelecekte yönetiminizi ve sorunları gidermenizi kolaylaştırmak için varlıklar klasöründeki farklı bölümler için ayrı CSS dosyaları ekleyebilirsiniz.

Son olarak, Javascript için açılır menüler, kaydırıcılar vb. gibi etkileşimli olması gereken öğeleri belirleyin.)

AJAX çağrıları ve DOM Manipülasyonu gibi görevleri kolaylaştırmak için jQuery'yi kullanmayı düşünün ve functions.php dosyasını kullanarak CSS'nizi (stil sayfaları) ve JavaScript dosyalarınızı (komut dosyalarını) WordPress temanıza doğru şekilde yükleyin.

Adım 5: Şimdi test kısmı geliyor, yukarıdaki tüm adımları başarıyla uyguladıktan sonra dosyalarınızı kaydedin ve her şeyin düzgün çalışıp çalışmadığını kontrol edin. Ancak bundan önce eklentiyi etkinleştirmemiz gerekiyor.

Eklentiyi etkinleştirmek için WordPress kontrol panelinize> Görünüm> temalara gidin. Özel temanız, daha önce tema klasörüne yüklediğiniz görselle birlikte görünmeye başlayacaktır. Etkinleştirmek ve ihlal etmek için tıklayın, WordPress siteniz teste hazır.

İzleyebileceğiniz test önerilerinden bazıları şunlardır:

• Sitenizin farklı tarayıcılarda ve ekran boyutlarında nasıl göründüğünü ve çalıştığını kontrol edin.
• Daha hızlı yükleme için görsellerinizi optimize etmek üzere araçları kullanın.
• Sitenizi hızlandırmak için önbelleğe alma uygulayın.
• Sitenizi yayına almadan önce yedeğini alın.

Özet

Figma'dan WordPress'e geçiş, web sitesinin karmaşıklığına bağlı olarak göründüğü kadar kolay değildir. Tasarım ne kadar karmaşıksa izlemeniz gereken süreç de o kadar karmaşık olur. Her türden kullanıcı için tüm seçenekleri kapsamaya çalıştık.

Bunu manuel olarak yapmak size daha fazla kontrol sağlayabilir, ancak çok fazla zaman ve çaba harcar. Ancak dönüştürme sürecini hızlandırmak için eklentilerden yararlanabilirsiniz ancak yine de daha iyi sonuçlar elde etmek için bazı değişiklikler yapmanız gerekebilir.

Hangi yöntemi seçeceğiniz tamamen sizin tercihinize ve anlama kolaylığınıza bağlıdır.

Rahul

Rahul Kumar, WordPress ve web barındırma konusunda uzmanlaşmış bir web tutkunu ve içerik stratejistidir. Yılların deneyimi ve sektör trendlerini takip etme kararlılığıyla trafiği yönlendiren, etkileşimi artıran ve dönüşümleri artıran etkili çevrimiçi stratejiler oluşturuyor. Rahul'ın detaylara olan ilgisi ve ilgi çekici içerik oluşturma yeteneği, onu çevrimiçi varlığını geliştirmek isteyen her marka için değerli bir varlık haline getiriyor.