Figma Tasarımlarını HTML/CSS Kodlarına Çevirme
Merhaba arkadaşlar, bu sefer en çok aranılan bir konu hakkında yazacağım. Figma içerisindeki tasarımlarımızı HTML/CSS koduna nasıl çeviririz. Figma her ne kadar işimizi çokça kolaylaştıracak araçlar yapsa da bu konuya henüz el atmadı. Figma içerisinde nesnesin birkaç özelliğini bizlere verse de yüzde yüz bir çevrim yapmamakta.
Yukarıdaki resimde görüldüğü üzere, nesnenin üzerine tıkladığınızda yan tarafta bulunan sekmede design kısmı gelmektedir. Hemen yanında bulunan “Inspect” bölümüne tıklarsanız karşınıza seçtiğiniz nesnenin birtakım bilgileri çıkmaktadır.
Elle kodlama şeklinde çevrim yaparken işinize yaracak birkaç bilgiyi burada sunmaktadır Figma. Tabi ki bu durum yeterli değildir.
Peki yok mu bu işi yapan bir araç dediğiniz duyar gibiyim. Elbette bu iş için ortaya çıkmış eklentiler(plug-in) mevcut. Öncelikle şunu belirterek başlamalıyım ki benim kullanıp yüzde yüz çalışıyor dediğim bir eklenti yok. Bu durumu bende araştırdım ve sizlere yardımcı olmak için bilgilerimi paylaşmak istiyorum.
İşinize yaracak birkaç eklenti:
Makers
Makers.so, tasarımlarınızı tek tıklamayla bir web sitesine dönüştürmek için bir Figma eklentisidir.
Makers, Figma içinde bir site oluşturucudur. Bu artık sitelerinizi Figma’dan hiç ayrılmadan tasarlayıp yayınlayabileceğiniz anlamına gelir. Figma’ya yeni başlıyorsanız, elinizde güçlü bir araç var; eğer deneyimli bir tasarımcıysanız, artık tasarımlarınızı nihai ürünle aranızda geliştiricilere ihtiyaç duymadan teslim edebilirsiniz.
Sitenizi tasarlarken sağ üst köşedeki ön izleme butonunu kullanarak periyodik olarak ön izleme yapabilirsiniz. Yapıcılar sitenizi oluşturacak ve onunla yeni bir tarayıcı sekmesi açacaktır. Bu aşamada, sitenize bir maker.so sitesinde herkese açık olarak erişilebilir. Bu site ücretsizdir ve istediğiniz kadar sayfa ekleyebilirsiniz.
12$/Ay site başına ücreti.
makers.so alan adları için ücretsiz.
Anima
Geliştirici dostu kodla hızlı bir şekilde oluşturun. Sıfır bağımlılık ve minimum kod yeniden düzenleme ile ekibinizin kurallarına göre uyarlanmış temiz, duyarlı, yeniden kullanılabilir kod bileşenlerini dışa aktarın.
Anima, tasarımı hızlı bir şekilde oluşturabileceğiniz yüksek kaliteli koda dönüştürmek için bilgisayarla görme algoritmalarını kullanır.
Anima, tasarımcıların Sketch, Adobe XD ve Figma ile aslına uygun prototipler oluşturmasına olanak sağlar. Geliştiricilerin birkaç tıklamayla geliştirici dostu kodu dışa aktarmasına olanak tanır.
TeleportHQ
teleportHQ, otomatik olarak kod yazan ve sizin yapmanıza gerek kalmadan dağıtan, ortak çalışmaya dayalı düşük kod platformudur.
HTML, CSS ve JS’ye temiz kod aktarımı: 9 farklı JS çerçevesinde ücretsiz üretime hazır kodu dışa aktarın ve platformunuzda barındırın.
Ücretsiz olarak 10 projeye kadar oluşturabilirsiniz.
Figma to HMTL, By Builder.io
Figma tasarımlarını yüksek kaliteli, duyarlı HTML, CSS, React ve daha fazlasına dönüştürün.
Bu eklenti şu adreste açık kaynak kodludur: https://github.com/BuilderIO/figma-html
Peki bütün bu eklentiler yüzde yüz işe yarıyor mu diye sorabilirsiniz. Hepsini deneme fırsatım olmadı ama kullandıklarım için açıkça şunu söyleyebilirim ki yüzde yüz benim işimi görmedi. Fakat hiç yardımcı olmuyor demek büyük haksızlık olur. Size verilen kodları düzenleyerek istediğiniz yapıya ulaşabilirsiniz. Her şeyde olduğu gibi artılar ve eksiler mevcut sıfırdan kodlama yapmaktansa kodları düzeltmek işinize daha kolaylaştırabilir. Ya da istediğimi alamıyorum düzeltmekle uğraşamam diyorsanız klasik şekilde elle kodlama yapabilirsiniz. Bu durum tamamen sizin inisiyatifinizde.
