Ne Diyor?

Figma’da Kod Nasıl Dışa Aktarılır

Windows PC’de Figma’da Kod Nasıl Dışa Aktarılır

Windows kullanıcısıysanız ve kodu Figma’da dışa aktarmak istiyorsanız, çok sayıda seçeneği kullanabileceğinizi bilmek sizi mutlu edecektir.

Figma Inspect

Figma’da kodu dışa aktarmak için kullanabileceğiniz yöntemlerden biri Figma Inspect’tir. Bu özellik, tasarımlarınızı kolayca Android, iOS veya Web koduna dönüştürmenize olanak tanır. Yerleşik olduğundan, herhangi bir eklenti veya üçüncü taraf uygulaması yüklemeniz gerekmez.

Nasıl kullanılacağı aşağıda açıklanmıştır:

  1. İlgilendiğiniz öğeleri seçin ve İncele sekmesine gidin.
  2. “Kod” bölümünün altında, dışa aktarmak istediğiniz kodu seçin (Web için CSS, iOS için Swift veya Android için XML).

Araç, seçtiğiniz seçeneğe bağlı olarak kodu oluşturur ve ardından dışa aktarabilirsiniz. Bu harika bir araç olmasına rağmen, bazı sınırlamaları vardır. Yani, SVG’yi HTML’ye aktaramazsınız. Bunun için bir eklenti kullanmanız gerekecek.

Figma Eklentileri

Figma, yüzlerce kullanışlı eklentiye sahiptir. Tasarımınızı HTML’ye aktarmak için kullanabileceğiniz birkaç tanesinden bahsedeceğiz.

Figma’dan HTML’ye

Eklenti size ihtiyaçlarınıza göre, HTML veya CSS halinde tasarımını dönüştürmesini sağlar. Eklentiyi yüklemek ve kodu dışa aktarmak için aşağıdaki adımları izleyin:

  1. Sol üst köşedeki simgesine basarak ana menüye erişin.
  2. “Eklentiler”e basın.
  3. “Topluluktaki Eklentilere Göz At” a basın.
  4. “Fima to HTML” yazın ve üst kısımdaki “Eklentiler”i seçin.
  5. “Yükle” düğmesine basın.
  6. Tasarımınıza geri dönün ve istediğiniz öğeleri seçin.
  7. Ana menüye dönün, “Eklentiler”i seçin ve ardından “Figma’dan HTML’ye”yi seçin.
  8. HTML veya CSS’yi seçin.
  9. İhtiyaçlarınıza göre “Kopyala” veya “İndir”e basın.

Figma için Anima

Bir başka yararlı eklenti ise Figma için Anima’dır. Bu eklenti ile tasarımınızı HTML, CSS, React ve Vue’ya dönüştürebilirsiniz. Eklentiyi kullanmak için şu adımları izleyin:

  1. Sol üstteki simgeyi seçerek ana menüyü açın.
  2. “Eklentiler”e basın.
  3. “Topluluktaki Eklentilere Göz At” seçeneğini seçin.
  4. “Figma için Anima” yazın.
  5. “Yükle” düğmesine basın.
  6. Dışa aktarmak istediğiniz öğeleri seçin.
  7. Ana menüyü açın, “Eklentiler”e basın ve “Figma için Anima”yı seçin. Hesabınız yoksa kaydolun.
  8. Kod türünü seçin ve “Kodu Dışa Aktar”a basın.

Mac’te Figma’da Kod Nasıl Dışa Aktarılır

Tasarımınızı bir Mac cihazında kodlamak için dışa aktarmak birkaç yolla yapılabilir.

Figma Inspect

Bu yerleşik araç, tasarımlarınız için kodu ve diğer değerleri incelemenize ve dışa aktarmanıza olanak tanır. Figma Inspect ile üç kod seçeneğinden birini seçebilirsiniz: Android, iOS veya Web (yalnızca CSS).

Figma Inspect’i Mac’te kullanmak için aşağıdaki adımları izleyin:

  1. Dışa aktarmak istediğiniz öğeleri seçin.
  2. Sağdaki “İncele” sekmesini açın.
  3. CSS, iOS veya Android arasından seçim yapın.
  4. Kodunuzu kopyalayın.

Yalnızca CSS, iOS ve Android ile ilgileniyorsanız, bu harika bir araçtır. Ancak tasarımınızı HTML’ye aktarmak istiyorsanız farklı bir yöntem kullanmanız gerekir.

Figma Eklentileri

Tasarımlarınızı HTML’ye dönüştürmek istiyorsanız, Figma bu amaca hizmet eden onlarca eklenti sunuyor. Kurulum işlemi basittir. En popüler olanlardan birkaçını listeleyeceğiz.

Figma’dan HTML’ye

Bu eklenti , tasarımınızı CSS veya HTML’ye dönüştürmenize olanak tanır. Nasıl kurulacağı aşağıda açıklanmıştır:

  1. Ana menüyü açmak için sol üstteki simgeyi seçin.
  2. “Eklentiler”e basın.
  3. “Topluluktaki Eklentilere Göz At” seçeneğini seçin.
  4. Arama çubuğuna “Fima to HTML” yazın ve en üstteki “Eklentiler”i seçin.
  5. “Yükle” düğmesine basın.
  6. Tasarımınıza dönün ve dışa aktarmak istediğiniz öğeleri seçin.
  7. Ana menüyü açın, “Eklentiler”i seçin ve ardından “Fima to HTML”yi seçin.
  8. HTML veya CSS’yi seçin.
  9. “Kopyala” veya “İndir”e basın.

Figma’dan Kod’a

Bu eklenti ile Figma tasarımınızı HTML, Tailwind, Flutter veya Swift UI’ye dönüştürebilirsiniz. Yüklemek ve kullanmak için aşağıdaki adımları izleyin:

  1. Ana menüye erişmek için sol üstteki simgeye basın.
  2. “Eklentiler”i seçin.
  3. “Topluluktaki Eklentilere Göz At” a basın.
  4. Arama çubuğuna “Fima to Code” yazın ve ilgili sonuçları almak için en üstteki “Eklentiler”i seçin.
  5. “Yükle” düğmesine basın.
  6. Tasarımınıza gidin ve istediğiniz öğeleri seçin.
  7. Ana menüye tekrar erişin, “Eklentiler”i seçin ve ardından “Figma to Code”u seçin.
  8. İstediğiniz kodu seçin.
  9. “Panoya Kopyala”ya basın.

İPhone’da Figma’daki Kodu Dışa Aktarabilir miyim?

Yeni figma iPhone uygulaması aracılığıyla bir beta sürümü olarak sadece sunulmuştu Testflight ilk 10.000 iPhone’lar için, ancak şirket tam sunum yakında belirtmektedir. Uygulama, bilgisayarınızda tasarımı düzenlerken tasarımlarınıza göz atmanıza ve erişmenize ve iPhone’unuzdaki canlı değişiklikleri izlemenize olanak tanır.

O zamanlar, tasarımları iPhone uygulaması aracılığıyla düzenlemek mümkün değil, bu da bunun üzerinden kodu dışa aktarmanın bir yolu olmadığı anlamına geliyor.

Figma ayrıca Figma Mirror uygulamasını App Store’da sunar. Bu uygulama, tasarımlarınızı aynı ağa bağlı olmadan herhangi bir iOS cihazına yansıtmanıza olanak tanır. Bu şekilde, tasarımınızın belirli bir cihazda (bu durumda iPhone) nasıl göründüğünü kontrol edebilir ve değişiklikleri takip edebilirsiniz. Kullanışlı olmasına rağmen uygulama, iPhone’unuzda kodu dışa aktarmanıza izin vermez. Bunun için bilgisayarınızı almanız gerekecek.

Tasarımlarınıza tarayıcınız üzerinden de erişebilirsiniz. Ancak yine de yalnızca tasarımınızı görüntüleyebilir ve canlı değişiklikleri takip edebilirsiniz.

Bir iPad’de Figma’daki Kodu Dışa Aktarabilir miyim?

Ne yazık ki, bir iPad kullanıyorsanız kodu Figma’da dışa aktarmak mümkün değildir. Figma mobil uygulama üzerinde çalışıyor ve bir beta sürümü var, ancak tabletler için mevcut değildi, sadece iPhone’lar ve Android’ler için mevcuttu.

Figma Mirror uygulaması iPad’lerde mevcuttur. Uygulama, tasarımınızda yaptığınız değişiklikleri bilgisayar üzerinden izlemenize ve iPad ekranında nasıl göründüklerini kontrol etmenize olanak tanır. Maalesef, uygulama içinde kodu dışa aktarma seçeneği mevcut değil.

Uygulamayı yüklemek istemiyorsanız, tarayıcınız üzerinden Figma’ya erişebilir ve tasarımdaki değişiklikleri takip edebilirsiniz. Ancak, Figma’daki kodu dışa aktarmak yalnızca bir bilgisayarda mümkündür.

Bir Android’de Figma’da Kodu Dışa Aktarabilir miyim

Figma şu anda Android uygulaması üzerinde çalışıyor ve 10.000 Android telefon için bir beta sürümü sunuyor. Uygulamayı Play Store’dan indirip bu bağlantıya erişerek test kullanıcısı olabilirsiniz . Bilgisayarınızın yakınında olmasanız bile uygulama içinde tasarımlarınıza göz atabilir, görüntüleyebilir ve paylaşabilir ve değişiklikleri takip edebilirsiniz.

Uygulama birçok amaç için faydalı olsa da, şimdilik kodu dışa aktarmanıza izin vermiyor.

Figma Ayna uygulaması Android için de mevcuttur. Ana amacı, tasarımlarınızda yaptığınız değişiklikleri bilgisayarınızda izlemek ve tüm Android cihazlarda iyi görünmelerini sağlamaktır. Kodu dışa aktarma seçeneği mevcut değil.

Uygulamayı yüklemek istemiyorsanız, tarayıcınız içinde Figma’yı da kullanabilirsiniz. Ancak yine de kodu dışa aktaramazsınız. Bunun için bilgisayarınızı kullanmanız gerekecek.

Ek SSS

Renkleri Figma’dan Xcode’a nasıl dışa aktarırım?

Ne yazık ki, Figma desteklemediği için renkleri Figma’dan Xcode’a aktarmak mümkün değil. Ancak, Figma Export adında kullanabileceğiniz bir geçici çözüm var . Kullanmak için aşağıdaki adımları izleyin:

1. Henüz yapmadıysanız, Figma Export’u kurun .

2. “Terminal.app”ı açın.

3. “figma-export” dosyasının bulunduğu klasörü açın.

4. “figma-export” uygulamasını başlatın.

5. “./figma-export renkler -i figma-export.yaml” kullanarak renkleri dışa aktarın.

HTML kodunu Figma’dan nasıl dışa aktarırım?

Daha önce de belirtildiği gibi, Figma Inspect adlı yerleşik araç, CSS almanıza izin verir, ancak HTML’yi değil. HTML koduna ihtiyacınız varsa, bir eklenti yüklemeniz gerekir.

Figma, bu amaca hizmet eden onlarca eklentiye sahiptir. Bizim önerimiz Figma’dan HTML’ye . Nasıl kullanılacağı aşağıda açıklanmıştır:

1. Ana menüyü açın. Bu, sol üstteki simgedir.

2. “Eklentiler”e basın.

3. “Toplulukta Eklentilere Göz At”ı seçin.

4. Arama çubuğuna “Fima to HTML” yazın ve en üstte “Eklentiler”in seçili olduğundan emin olun.

5. “Yükle”yi seçin.

6. Tasarımınıza dönün ve HTML’ye dönüştürmek istediğiniz öğeleri seçin.

7. Ana menüye gidin, “Eklentiler”i seçin ve “Fima to HTML”yi açın.

8. HTML’ye basın.

9. “Kopyala” veya “İndir” arasında seçim yapın.

Tepkiniz ne?

guest
0 Yorum
Inline Feedbacks
View all comments