Tasarımdan Koda: Figma Değişkenleri ve React ile Tasarım Tokenlarının Uygulanması

Modern ön uç dünyasında, tasarım ile geliştirme arasındaki boşluk genellikle verimsizliğin temel kaynağıdır. Yıllardır teslimat süreci, görsel özelliklerin koda manuel olarak çevrilmesini içeriyor; bu da "tasarım kayması" ve bakım kabuslarına yol açıyordu. Çözüm ne? Tasarım tokenları. Renkler, boşluklar ve tipografi gibi tasarım özelliklerini platformlar arasında paylaşılabilen veri yapıları olarak ele alarak, tek bir doğruluk kaynağı oluşturuyoruz. Bu yazıda, Figma'nın yerleşik Değişkenler özelliği, standart CSS Özel Özellikleri ve React bileşenleri kullanılarak bu boşluğun nasıl kapatılacağı inceleniyor.

Neden Tasarım Tokenları Önemlidir?

Temelinde, tasarım tokenları atomik değerlerdir; özellikle UI'nizde kullanılan renkler, boşluklar ve yazı tipi boyutları. Tasarım sistemleri için yapı taşları olarak görev yaparlar. Bileşenlerinize #0055ff değerini doğrudan yazmak yerine, primary-action-bg gibi anlamsal bir tokena başvurursunuz. Bu soyutlama, kolay temalandırma, tutarlılık ve tasarım aracındaki değişikliklerin kod tabanında otomatik olarak yansıtıldığı akıcı bir iş akışı sağlar.

Figma Değişkenlerinden Yararlanma

Figma'daki son güncellemeler, güçlü Değişkenler yeteneklerini tanıttı. Miras kalan stillerin aksine, değişkenler renk, sayı, dize ve boolean gibi veri türlerini destekler ve yerel ile koleksiyon modlarına izin verir. Bu, doğrudan Figma içinde theme-light ve theme-dark modlarını tanımlayabileceğiniz anlamına gelir. Bu tokenları dışa aktardığınızda, genellikle Figma değişken adlarını anlamsal tokenlara eşleyen bir JSON temsili oluşturmak için eklentiler veya manuel komut dosyaları kullanırsınız.

Örneğin, Color/Primary/Default adında bir Figma değişkeni, brand-primary adında bir anlamsal tokena eşlenebilir. Bu eşleme, tasarımdan geliştirmeye geçerken bağlamı korumak için hayati önem taşır.

CSS Özel Özellikleriyle Bağlantı Kurma

CSS Özel Özellikleri (CSS Değişkenleri), web uygulaması için ideal bir köprüdür. Tarayıcıya yereldir, miras almaya izin verir ve dinamik olarak geçersiz kılınabilir. Bunu uygulamak için, tasarım tokenlarımızı doğrudan :root seçicisi içindeki CSS değişkenlerine eşleriz.

Tokenları dışa aktardıktan sonra CSS'nizin nasıl görünebileceğine dair bir örnek:

:root {
  /* Anlamsal Renk Tokenları */
  --color-brand-primary: #0055ff;
  --color-brand-primary-hover: #0044cc;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;

  /* Boşluk Tokenları */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* Tipografi Tokenları */
  --font-family-base: 'Inter', sans-serif;
  --font-size-lg: 1.25rem;
  --font-weight-bold: 700;
}

Anlamsal adlar kullanarak (örneğin, --color-grey-500 yerine --color-text-primary), kodu belirli uygulama ayrıntılarından soyutlamış olursunuz. Tasarım ekibiniz, ikincil metin için gri yerine koyu maviye geçmeye karar verirse, değişken tanımını güncellemeniz yeterlidir; bunu kullanan her bileşeni güncellemeye gerek kalmaz.

React Bileşenleriyle Entegrasyon

Bir React uygulamasında, temel temalandırma için karmaşık bağlam sağlayıcılara (context providers) ihtiyaç duymadan, CSS miras alması sayesinde bu CSS değişkenlerini bileşenlerinizde doğrudan tüketebilirsiniz. Ancak dinamik temalandırma için body veya kök bir kapsayıcı üzerindeki sınıfları değiştirebilirsiniz.

import React from 'react';

const PrimaryButton = ({ children }) => {
  return (
    <button
      style={{
        backgroundColor: 'var(--color-brand-primary)',
        color: '#ffffff',
        padding: 'var(--space-sm) var(--space-md)',
        borderRadius: '4px',
        fontWeight: 'var(--font-weight-bold)',
        cursor: 'pointer',
        transition: 'background-color 0.2s ease'
      }}
      onMouseEnter={(e) => {
        e.target.style.backgroundColor = 'var(--color-brand-primary-hover)';
      }}
    >
      {children}
    </button>
  );
};

export default PrimaryButton;

Bu yaklaşım, React bileşenlerinizin tema farkında kalmasını ve UI'nızın geri kalanıyla tutarlı olmasını sağlar. Daha karmaşık mantık için, bu değerleri programatik erişim için JavaScript nesnelerine de ayırabilir; bu da tür güvenliği ve daha iyi geliştirici deneyimi sağlar.

Sonuç

Tasarım tokenlarının uygulanması sadece zaman kazanmakla ilgili değildir; ölçeklenebilir, sürdürülebilir bir tasarım sistemi oluşturmaktır. Figma Değişkenlerini CSS Özel Özellikleri ve React'e bağlayarak, tasarım ve kodun aynı dili konuştuğu akıcı bir hat oluşturursunuz. Renklerinizi ve boşluklarınızı standartlaştırarak küçük başlayın ve token kitaplığınızı tipografi ve efektleri içerecek şekilde kademeli olarak genişletin. Sonuç, daha tutarlı bir ürün ve daha mutlu bir geliştirme ekibi olacaktır.