Figma, UI/UX tasarımcılarının en çok tercih ettiği araçlardan biri. Tasarımcıdan geliştiriciye geçiş sürecinde renklerin doğru aktarılması kritik önem taşır. Bu rehberde Figma'dan CSS'e renk aktarımı, değişken kullanımı ve developer handoff ipuçlarını ele alıyoruz.
Figma'da Renk Nasıl Kopyalanır?
Figma'da herhangi bir öğeye tıklayıp sağ paneldeki Fill bölümünden rengi seçtiğinizde, rengin yanındaki küçük simgeye tıklayarak kopyalayabilirsiniz. Varsayılan olarak HEX formatında kopyalanır. Formatı değiştirmek için renk seçicide (color picker) sağ üstteki menüden HEX, RGB, HSL veya HSB seçebilirsiniz.
Gradient kullanıyorsanız, her renk durağının (color stop) HEX değerini tek tek almanız gerekir. Figma gradientleri linear-gradient sözdizimine dönüştürülebilir; ancak açı ve durakların manuel ayarlanması gerekebilir.
HEX, RGB ve HSL Formatları
Figma HEX (#RRGGBB) formatında kopyalar. CSS'de isterseniz HEX'ten RGB veya HSL'e dönüştürme yapabilirsiniz. HSL özellikle renk değişkenlerinde (açık/koyu tonlar) kullanım için pratiktir çünkü Lightness değerini değiştirerek tonlar üretebilirsiniz.
:root {
/* Figma'dan kopyalanan ana renkler */
--color-primary: #3b82f6;
--color-secondary: #8b5cf6;
--color-accent: #ec4899;
/* Gradient */
--gradient-hero: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}
Figma Variables ve CSS Eşleştirmesi
Figma'da Variables (Değişkenler) özelliği ile renk setleri tanımlayabilirsiniz. Bu değişkenler "primitive" veya "alias" olabilir. Export sırasında sadece değerler aktarılır; isimlendirme sizin takip etmenize bağlıdır.
Figma'daki variable gruplarını CSS custom properties ile eşleştirmek için tutarlı bir isimlendirme kullanın. Örneğin Colors/Primary/500 → --color-primary-500.
Developer Handoff İpuçları
Tasarımcı Tarafı
- Renk paletini Variables ile merkezi hale getirin; tek tek atamalar yerine semantik isimler kullanın.
- Gradientleri component olarak saklayın; böylece geliştirici aynı gradienti birden fazla yerde kullanabilir.
- Dev Mode'da inspect panelinden CSS snippet'leri kopyalanabilir; gradient ve renk için doğrudan CSS çıktısı alınır.
Geliştirici Tarafı
- Dev Mode'da "Copy as CSS" ile gradient veya renk değerlerini anında kopyalayın.
- Figma plugin'leri (örn. "Design Tokens") renkleri JSON veya CSS değişkeni formatında export edebilir.
- Tailwind kullanıyorsanız, Tailwind renk sistemi ile Figma paletini tailwind.config.js'e aktarın.
Gradient Export
Figma gradientleri doğrusal (linear), radyal (radial) veya açısal (angular) olabilir. Linear gradient için Figma açıyı derece cinsinden verir; CSS'deki linear-gradient(angle, color1, color2) ile eşleşir. Dikkat: Figma'daki 0° genellikle sol-sağ yönündedir; CSS'de 90deg ile eşdeğerdir.
/* Figma: 135° linear, #3b82f6 → #8b5cf6 */ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Renk duraklarının konumlarını (örn. %25, %75) Figma'da görebilir ve CSS'e aynen aktarabilirsiniz.
Sonuç
Figma'dan CSS'e renk aktarımı, doğru format seçimi ve merkezi değişken kullanımı ile sorunsuz hale gelir. Gradient Oluşturucu aracımızla Figma'dan aldığınız renk kodlarını hızlıca test edebilir ve palet varyasyonları oluşturabilirsiniz.
İlgili rehberler: HEX/RGB/HSL Dönüşüm · CSS Gradient Nedir? · Tailwind Renk Sistemi · Palet Oluşturucu · Marka Renkleri