Figma Dev Mode Nedir? Tasarımdan Koda Geçiş, CSS Inspect ve VS Code Kullanımı

[oonurergat]

Merhaba arkadaşlar,

Web geliştirmeyle uğraşanların çoğu Figma ile mutlaka karşılaşmıştır. Özellikle hazır bir tasarımı HTML/CSS'e dökerken bazen küçük bir butonun ölçüsünü, bazen iki kutu arasındaki boşluğu, bazen de kullanılan fontun tam olarak hangi ağırlıkta olduğunu bulmak için gereğinden fazla zaman harcayabiliyoruz.

Bu konuda Figma'nın Dev Mode özelliğine değinmek istiyorum. Özellikle frontend geliştirenler için oldukça kullanışlı özellikleri var.

Dev Mode aslında tasarımcıların hazırladığı arayüzleri geliştiricilerin daha kolay inceleyebilmesi ve koda aktarabilmesi için oluşturulmuş bir çalışma alanı.

En güzel tarafı ise tasarımdaki birçok detaya doğrudan ulaşabiliyor olmamız.
​

1. Figma Dev Mode Nasıl Açılır?​

Öncelikle Figma üzerinde bir tasarım dosyasını açıyoruz.

Üst araç çubuğundan Dev Mode'a geçebiliriz. Bunun için klavye kısayolu da mevcut:

Shift + D

Dev Mode'a geçtiğimizde arayüz geliştiricilere yönelik olarak değişiyor.

Özellikle sağ taraftaki Inspect paneli üzerinden seçtiğimiz nesnelerin özelliklerini görebiliyoruz.

Burada ulaşabileceğimiz bazı bilgiler:
​

• Genişlik ve yükseklik değerleri​
• Padding ve öğeler arasındaki boşluklar​
• Renk kodları​
• Font ailesi, boyutu ve kalınlığı​
• Border ve border-radius değerleri​
• Auto Layout ve hizalama bilgileri​
• CSS kod çıktıları​
• İkonlar ve dışa aktarılabilir görseller​

Yani tasarımcıya sürekli "Buradaki boşluk kaç piksel?", "Bu hangi renk?" gibi sorular sormamıza gerek kalmıyor.
​

2. Inspect ile CSS Değerlerini Öğrenmek​

Bence Dev Mode'un en faydalı özelliklerinden biri Inspect paneli.

Örneğin Figma'da bir buton tasarlandığını düşünelim.

Butonu seçtiğimizde genişlik, yükseklik, arka plan rengi, köşe yuvarlaklığı ve diğer birçok özelliğini inceleyebiliyoruz.

Diyelim ki tasarımda şu özellikler kullanılmış olsun:

Genişlik: 180px
Yükseklik: 48px
Arka plan: #2563EB
Köşe yuvarlaklığı: 12px
Yazı boyutu: 16px
Yazı kalınlığı: 600

Bu değerleri kullanarak CSS tarafında şöyle bir yapı oluşturabiliriz:

.custom-button {
display: flex;
align-items: center;
justify-content: center;

width: 180px;
height: 48px;

background-color: #2563EB;
color: #FFFFFF;

border: none;
border-radius: 12px;

font-size: 16px;
font-weight: 600;

cursor: pointer;
transition: background-color 0.2s ease;
}

.custom-button {
background-color: #1D4ED8;
}

Buradaki CSS tamamen örnek amaçlı. Hover efekti gibi bazı davranışları kendimiz eklememiz gerekiyor.

Figma üzerinden alınan kodu da doğrudan projeye yapıştırmak yerine kontrol etmekte fayda var. Çünkü oluşturulan CSS her zaman projemizin kullandığı yapıya uygun olmayabiliyor.
​

3. Ölçüler ve Boşlukları İncelemek​

Bir diğer güzel özellik ise Measurement, yani ölçüm araçları.

Özellikle bir tasarımı birebir kodlamaya çalışıyorsanız oldukça işe yarıyor.

Örneğin bir kart tasarımımız olsun.

Kartın içerisindeki başlık ile açıklama arasındaki boşluk 8px, kartın iç boşluğu ise 24px olarak belirlenmiş olsun.

Bunları tahmin ederek yazmak yerine Dev Mode üzerinden inceleyebiliyoruz.

Örnek CSS:

.product-card {
display: flex;
flex-direction: column;

gap: 8px;
padding: 24px;

background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 16px;
}

Özellikle büyük projelerde bütün sayfalarda aynı boşlukları ve ölçüleri kullanmak tasarım bütünlüğü açısından önemli.

Burada dikkat edilmesi gereken bir nokta da şu: Tasarımda sabit bir genişlik görmemiz, o genişliği her ekran boyutunda sabit kullanmamız gerektiği anlamına gelmiyor.

Responsive uyumluluğu yine bizim doğru şekilde geliştirmemiz gerekiyor.
​

4. Tasarımcı Notları (Annotations)​

Bence ekip halinde çalışanlar için oldukça önemli bir özellik.

Tasarımcı bir bileşenin üzerine not ekleyebiliyor ve geliştirici de bu notu tasarımı incelerken görebiliyor.

Örneğin bir giriş formunda şu şekilde açıklamalar bulunabilir:

Giriş Formu
[/CENTER]
[LIST]
[*][CENTER]E-posta alanı zorunludur.[/CENTER]
[*][CENTER]Şifre minimum 8 karakter olmalıdır.[/CENTER]
[*][CENTER]Hatalı girişte input kenarlığı kırmızı olacaktır.[/CENTER]
[*][CENTER]Gönder butonu işlem sırasında devre dışı kalacaktır.[/CENTER]
[*][CENTER]Mobil görünümde form tam genişlikte olacaktır.

[/LIST]

Bu bilgiler tasarımın yalnızca görselini değil, nasıl çalışması gerektiğini de anlamamıza yardımcı oluyor.

Tabii burada tasarımcı ve geliştirici arasındaki iletişim tamamen ortadan kalkmıyor. Özellikle API işlemleri, hata senaryoları veya karmaşık etkileşimler için ayrıca konuşmak gerekebiliyor.
​

5. Figma Dev Mode ile VS Code Kullanmak​

Gelelim benim en çok dikkatimi çeken özelliklerden birine.

Figma'nın VS Code için bir eklentisi bulunuyor.

Eklentinin adı Figma for VS Code.

Visual Studio Code içerisinde Extensions bölümüne girerek aratabilirsiniz.

Figma for VS Code

Eklentiyi kurduktan sonra Figma hesabımızla bağlantı kurabiliyoruz.

Böylece tasarımları incelemek için sürekli tarayıcı ile editör arasında geçiş yapmamız gerekmiyor.

VS Code üzerinden:
​

• Figma tasarımlarını görüntüleyebiliyoruz.​
• Katmanları ve bileşenleri inceleyebiliyoruz.​
• Tasarım özelliklerini kontrol edebiliyoruz.​
• Kod oluşturma özelliklerinden faydalanabiliyoruz.​
• Tasarımda kullanılan bazı görsel varlıklara ulaşabiliyoruz.​

Örneğin sol tarafta React projemizi geliştirirken diğer tarafta Figma tasarımını inceleyebiliriz.

Bu özellikle çok sayıda sayfası ve bileşeni bulunan projelerde faydalı olabilir.

Yalnız eklentinin bazı durumlarda yavaş çalışabildiğini de belirtmek lazım.
​

6. Figma Tasarımını React Bileşenine Dönüştürmek​

Dev Mode ile tasarımın özelliklerini öğrenip bunları tekrar kullanılabilir bileşenlere dönüştürebiliriz.

Örneğin bir buton tasarımımız varsa her sayfada ayrı CSS yazmak yerine React tarafında ortak bir bileşen oluşturabiliriz.

import React from "react";
import "./Button.css";

export default function Button({
children,
onClick,
disabled = false
}) {
return (
<button
         className="custom-button"
         onClick={onClick}
         disabled={disabled}
     >
{children}
</button>
);
}

Ardından farklı sayfalarda kullanabiliriz:

<Button onClick={() => alert("İşlem başarılı!")}>
Kaydet
</Button>

<Button disabled>
    İşlem Yapılıyor
</Button>

Bu örnekte bileşeni biz oluşturuyoruz. Dev Mode tek başına otomatik olarak eksiksiz çalışan bir React uygulaması üretmiyor.

Ancak tasarımdaki renkleri, ölçüleri ve tipografi değerlerini öğrenme kısmını kolaylaştırıyor.
​

7. Tasarım Değişikliklerini Karşılaştırmak​

Bir projede en çok karşılaşılan durumlardan biri de tasarımın geliştirme sırasında değiştirilmesi.

Diyelim ki bir sayfanın arayüzünü tamamladık ancak tasarımcı sonradan buton rengini, kartların boşluğunu veya başlık boyutlarını değiştirdi.

Dev Mode içerisindeki karşılaştırma özelliği sayesinde tasarımın önceki ve güncel hâllerini inceleyebiliyoruz.

Böylece hangi alanlarda değişiklik yapıldığını anlamamız kolaylaşıyor.

Özellikle sürekli güncellenen panellerde, yönetim sistemlerinde ve büyük web projelerinde oldukça kullanışlı bir özellik.
​

8. Ready for Dev Özelliği​

Ekip içerisinde çalışıyorsanız bu özellik de önemli.

Tasarımcı henüz tamamlanmamış ekranları ayrı tutup geliştirmeye hazır olan bölümleri Ready for dev olarak işaretleyebiliyor.

Geliştirici de hangi ekran üzerinde çalışabileceğini daha rahat görebiliyor.

Örneğin:

Giriş Sayfası       -> Geliştirmeye Hazır
Kayıt Sayfası       -> Geliştirmeye Hazır
Kullanıcı Paneli    -> Tasarım Devam Ediyor
Profil Sayfası      -> Geliştirmeye Hazır

Bu liste örnek bir iş akışını gösteriyor.

Böylece henüz tamamlanmamış bir tasarımı yanlışlıkla kodlamaya başlama ihtimalimiz azalıyor.
​

9. Code Connect Ne İşe Yarıyor?​

Figma'nın Code Connect adında daha gelişmiş bir özelliği de bulunuyor.

Normalde Dev Mode, seçtiğimiz tasarım üzerinden otomatik kod önerileri gösterebiliyor.

Code Connect ise Figma bileşenleriyle projede kullandığımız gerçek kod bileşenlerini eşleştirmeyi amaçlıyor.

Örneğin tasarım sistemimizde bir PrimaryButton bileşeni bulunuyorsa, geliştiriciye sadece CSS değerleri göstermek yerine projedeki ilgili bileşenin kullanımını da sunabiliyoruz.

Bu özellikle ortak component kütüphanesi kullanan ekiplerde ciddi avantaj sağlayabilir.
​

10. Dev Mode Kullanmak Mantıklı mı?​

Bana göre özellikle frontend geliştirme yapan ve Figma tasarımlarını sık sık koda aktaran kişiler için oldukça faydalı.

Ama şunu da unutmamak gerekiyor:

Dev Mode, tasarımı tek tuşla kusursuz bir web sitesine dönüştüren bir araç değil.

CSS kodlarını incelemek, tasarım ölçülerini öğrenmek, bileşenleri analiz etmek ve tasarımcıyla daha sağlıklı iletişim kurmak için geliştirilmiş bir sistem.

Responsive yapı, erişilebilirlik, performans, dinamik veriler ve uygulamanın iş mantığı hâlâ geliştiricinin sorumluluğunda.

Ayrıca Dev Mode'un tam kullanımı için uygun Figma planı ve Full veya Dev seat gerekiyor. Bu nedenle özellikle bireysel çalışanların abonelik koşullarını kontrol etmesinde fayda var.
​

Sonuç​

Eskiden Figma tasarımlarını koda aktarırken çoğu detayı elle kontrol ediyorduk. Dev Mode bu işlemleri tek bir yerde toplaması açısından güzel düşünülmüş.

Özellikle Inspect, ölçüm araçları, tasarım notları ve VS Code entegrasyonunu faydalı buluyorum.

Benim düşüncem, bu tür araçların yazılımcının yerini almak yerine tasarım ile geliştirme arasındaki gereksiz işleri azaltması gerektiği yönünde.

Sonuçta önemli olan sadece tasarımla aynı görünen bir sayfa oluşturmak değil, aynı zamanda temiz, sürdürülebilir ve farklı cihazlarda düzgün çalışan bir kod yapısı kurabilmek.

Sizler Figma tasarımlarını koda aktarırken Dev Mode kullanıyor musunuz, yoksa klasik yöntemlerle mi ilerliyorsunuz?​

​

 

[Tolstoy]

Eline sağlık