Generate Figma Library

Generate Figma Library — Koddan DS Kütüphanesi İnşa

> Design Token Kuralı: Bu skill'deki kod örneklerinde geçen font adları, renk kodları, piksel boyutları yalnızca FORMAT gösterimidir. Çalışma anında tüm design token değerleri (font, renk, boyut, spacing, radius, gölge) kayıtlı kütüphaneden (figma_get_variables, figma_get_styles) veya kullanıcıdan okunmalıdır. Hardcoded token değeri kullanma. Detay: project-context.md → "Design Token Kuralı".

Overview

Bu skill, bir kod tabanından Figma'da profesyonel bir design system kütüphanesi oluşturur. Variable'lar (token), stiller, bileşenler (variant, auto-layout, property) ve sayfa yapısı dahil. Topluluk figma-generate-library skill'inden uyarlanmış, F-MCP Bridge araçlarına göre yeniden yazılmıştır.

Bu ASLA tek seferde yapılacak bir iş değildir. DS inşa etmek 20–100+ figma_execute çağrısı, birden fazla faz ve zorunlu kullanıcı onay noktaları gerektirir.

Zorunlu: Her figma_execute çağrısından önce [figma-canvas-ops](../figma-canvas-ops/SKILL.md) kılavuzundaki kuralları uygula.

Skill Boundaries

• Bu skill: Figma'da DS kütüphanesi oluşturma/güncelleme
• DS bileşenleriyle ekran oluşturmak istiyorsan → [generate-figma-screen](../generate-figma-screen/SKILL.md)
• Mevcut ekranı DS'ye hizalamak istiyorsan → [apply-figma-design-system](../apply-figma-design-system/SKILL.md)
• Figma token'larını kod dosyalarına export etmek istiyorsan → [design-token-pipeline](../design-token-pipeline/SKILL.md)

Prerequisites

• F-MCP Bridge plugin bağlı olmalı
• Kod tabanında token/bileşen bilgisi mevcut olmalı (CSS variables, Tailwind config, Swift Color extension, vb.)

F-MCP skill koordinasyonu

• Sonra: design-token-pipeline (token export), code-design-mapper (bileşen eşleme), design-system-rules (kural üretimi)
• Doğrulama: audit-figma-design-system ile oluşturulan kütüphanenin tutarlılığını kontrol et
• a11y: figma-a11y-audit ile kontrast ve erişilebilirlik kontrolü

F-MCP Avantajları

Bridge'de topluluk skill'inde olmayan toplu araçlar mevcut:

| Araç | Açıklama | |---|---| | figma_batch_create_variables | Toplu variable oluşturma | | figma_batch_update_variables | Toplu variable güncelleme | | figma_setup_design_tokens | Yapılandırılmış token kurulumu | | figma_arrange_component_set | Variant grid düzenleme | | figma_create_variable_collection | Collection oluşturma |

Zorunlu Faz Sırası

Faz sırasını değiştirme veya atlama — yapısal bozulmalara neden olur.

Faz 0: KEŞİF (henüz yazma yok)
  0a. Kod tabanını analiz et → token, bileşen, isimlendirme kurallarını çıkar
  0b. Figma dosyasını incele → mevcut sayfa, variable, bileşen, stil
  0c. v1 kapsamını kilitle → tam token seti + bileşen listesinde mutabık kal
  ✋ KULLANICI ONAYI: tam planı sun, onay bekle

Faz 1: TEMELLERİ KUR (token'lar — her zaman bileşenlerden önce)
  1a. Variable collection ve modları oluştur
  1b. Primitive variable'lar (ham değerler)
  1c. Semantic variable'lar (alias, mod-bazlı)
  1d. Tüm variable'larda scope ayarla
  1e. Effect style ve text style oluştur
  1f. Motion token'ları oluştur:
      - duration/fast: 150 (ms)
      - duration/normal: 250
      - duration/slow: 400
      - easing/standard: "ease-in-out"
      - easing/decelerate: "ease-out"
      - easing/accelerate: "ease-in"
      NOT: Figma'da motion token'ları native variable olarak desteklenmez (FLOAT/STRING).
      STRING variable olarak oluştur ve scope'u "ALL_SCOPES" ayarla.
      Alternatif: Dokümantasyon sayfasında motion token tablosu olarak belgele.
  1g. Shadow/elevation token'ları: shadow/sm, shadow/md, shadow/lg, shadow/xl
      Effect style olarak oluştur (figma_execute ile dropShadow).
  → Çıkış kriteri: planlanan her token mevcut, FLOAT token scope'ları ayarlı, STRING token'lar (easing) scope gerektirmez, shadow effect style'lar oluşturulmuş
  ✋ KULLANICI ONAYI: variable özeti göster

Faz 2: DOSYA YAPISI (bileşenlerden önce)
  2a. Sayfa iskeletini oluştur: Cover → Başlangıç → Temeller → Bileşenler → Yardımcılar
  2b. Temel dokümantasyon sayfaları (renk swatchleri, tipografi örnekleri, spacing barları)

  **60-30-10 Renk Kuralı:**

  Palette hiyerarşisi (token yapısı):
  - **%60 Nötr** — Arka plan, yüzey, kenarlık renkleri (neutral/50-900, surface/*)
  - **%30 Birincil** — Marka rengi, birincil aksiyonlar, vurgulanan alanlar (primary/*, brand/*)
  - **%10 Vurgu** — CTA butonları, bildirimler, hata/uyarı durumları (accent/*, semantic/*)

  UI kullanım rehberi (alan dağılımı):
  - Ekran alanının ~%60'ı nötr renklerle kaplanmalı (beyaz/gri arka plan, yüzeyler)
  - Ekran alanının ~%30'u birincil marka rengi ve türevleriyle dolmalı (navigasyon, başlıklar, paneller)
  - Ekran alanının ~%10'u dikkat çekici vurgu renkleriyle işaretlenmeli (CTA, badge, durum göstergeleri)

  Bu oran kesin olmaktan çok yol göstericidir; tasarımın görsel dengesini sağlamak amaçlanır.
  → Çıkış kriteri: planlanan tüm sayfalar mevcut
  ✋ KULLANICI ONAYI: sayfa listesi + screenshot

Faz 3: BİLEŞENLER (bağımlılık sırasıyla, teker teker)
  Her bileşen için (atomlar → moleküller → organizmalar):
    3a. Bileşen sayfasını oluştur
    3b. Base component: auto-layout + variable bağlama
    3c. Variant kombinasyonları (combineAsVariants + grid layout)
    3d. Durum kapsamı kontrolü: her bileşende en az 4 durum olmalı
        Zorunlu: Default, Disabled
        Bileşen tipine göre: Hover, Active/Pressed, Loading, Error, Focus
        Etkileşimli bileşenler (Button, Input, Toggle, Checkbox):
          minimum Default + Hover + Active + Disabled + Focus = 5 durum
        Statik bileşenler (Card, Badge, Divider):
          minimum Default + Disabled = 2 durum yeterli
    3e. Component property ekle (TEXT, BOOLEAN, INSTANCE_SWAP)
    3f. Sayfa dokümantasyonu (başlık, açıklama, kullanım notları)
    3g. Doğrulama: figma_get_file_data + figma_capture_screenshot
    → Çıkış kriteri: variant sayısı doğru, tüm bağlamalar doğrulanmış, durum kapsamı yeterli
    ✋ KULLANICI ONAYI: her bileşen sonrası screenshot

Faz 4: ENTEGRASYON + QA
  4a. İsteğe bağlı Code Connect eşleme (code-design-mapper)
  4b. a11y denetimi (figma-a11y-audit): kontrast, minimum dokunma hedefi
  4c. İsimlendirme denetimi: kopya yok, isimsiz node yok, tutarlı casing
  4d. Bağlanmamış fill/stroke denetimi: hardcode kalmamış
  4e. Son review: tüm sayfaların screenshot'ları
  ✋ KULLANICI ONAYI: tam onay

Faz 0: Keşif (Detay)

0a. Kod tabanı analizi

Aşağıdakileri çıkar:

| Kaynak | Çıkarılacak | |---|---| | CSS Custom Properties / Sass variables | Renk, spacing, radius, shadow token'ları | | Tailwind config | Tema token'ları, breakpoint'ler | | Swift Color/Font extension | iOS token'ları | | Android colors.xml / Compose Theme | Android token'ları | | Bileşen dosyaları | Bileşen listesi, prop'lar, variant'lar |

0b. Figma dosyası inceleme

figma_get_status()
figma_get_file_data(depth=1)
figma_get_variables(verbosity="summary")
figma_get_styles()

Mevcut yapıyı not al — çakışma riski varsa kullanıcıya sor.

Faz 1: Temeller (Detay)

Variable collection oluşturma

figma_create_variable_collection(name="Colors", modes=["Light", "Dark"])
figma_create_variable_collection(name="Spacing", modes=["Default"])
figma_create_variable_collection(name="Radius", modes=["Default"])

Breakpoint / Ekran Boyut Token'ları (ZORUNLU)

Her DS kütüphanesinde ekran boyut token'ları olmalı. Responsive tasarımda hard-coded boyut KABUL EDİLMEZ:

Primitives:
  screen/mobile-width: 390     (iPhone 14)
  screen/mobile-height: 844
  screen/tablet-width: 768     (iPad portrait)
  screen/tablet-height: 1024
  screen/web-width: 1440       (Desktop)
  screen/web-height: 900
  screen/tablet-padding: 120   (Tablet yan padding)
  screen/web-padding: 480      (Web yan padding — centered card)
  screen/top-padding-mobile: 80
  screen/top-padding-tablet: 160
  screen/bottom-padding: 40

Semantic:
  layout/screen-mobile-width → screen/mobile-width
  layout/screen-tablet-width → screen/tablet-width
  layout/screen-web-width → screen/web-width
  layout/screen-tablet-padding → screen/tablet-padding
  layout/screen-web-padding → screen/web-padding

Her ekran frame'inde şu binding'ler ZORUNLUDUR:

• setBoundVariable("width", ...) — genişlik
• setBoundVariable("minHeight", ...) — minimum yükseklik
• setBoundVariable("paddingLeft/Right", ...) — yan padding
• setBoundVariable("paddingTop/Bottom", ...) — üst/alt padding

Figma'da "Fixed width (390)" veya "Fixed height (900)" yerine variable ikonu görünmelidir. Hard-coded boyut değeri KABUL EDİLMEZ.

Kritik Kural: Tüm Görünüm Değerleri Token'a Bağlı Olmalı (ZORUNLU)

Bir bileşen oluşturulurken aşağıdaki TÜM değerler semantic variable'a bağlanmalıdır. Hardcoded değer KABUL EDİLMEZ:

| Özellik | Bağlama Yöntemi | Örnek Token | |---------|-----------------|-------------| | Fill (arka plan) | setBoundVariable("fills", ...) | button/primary/bg | | Text fill (yazı rengi) | Text node'da setBoundVariable("fills", ...) | button/primary/text | | Stroke (kenarlık rengi) | setBoundVariable("strokes", ...) | button/primary/border | | Stroke width (kenarlık kalınlığı) | setBoundVariable("strokeWeight", ...) | button/border-width | | Corner radius | setBoundVariable("topLeftRadius", ...) vb. | button/radius | | Padding | setBoundVariable("paddingLeft", ...) vb. | button/padding-x | | Item spacing (gap) | setBoundVariable("itemSpacing", ...) | button/gap | | Min height | setBoundVariable("minHeight", ...) | button/minHeight | | Font size | Text Style oluştur + setBoundVariable("fontSize", ...) | button/fontSize |

Özellikle gözden kaçan özellikler:

• strokeWeight — Outline buton gibi kenarlığı olan variantlarda kenarlık kalınlığı variable'a bağlanmalı
• fontSize — Figma'da fontFamily/fontWeight variable olarak bağlanamaz, Text Style ile yönetilir
• Text Style oluştur → fontSize'i variable'a bağla → tüm text node'lara setTextStyleIdAsync ile uygula

Kritik Kural: Text Hizalama (ZORUNLU)

Text node'un textAlignHorizontal değeri, bileşenin amacına göre ayarlanmalı:

| Bileşen Tipi | textAlignHorizontal | Neden | |-------------|---------------------|-------| | Button, Tag, Badge | CENTER | Yazı butonun ortasında olmalı | | Input, Textarea | LEFT | Kullanıcı metni soldan yazar | | Card title, List item | LEFT | Okuma yönü sol→sağ | | Dialog title | LEFT veya CENTER | Tasarım kararına bağlı | | Table header/cell | LEFT | Tablo verisi sola hizalı |

Kural: textAlignHorizontal ASLA varsayılan LEFT olarak bırakılmamalı — bileşen tipine göre bilinçli seçilmeli. Text Style içerisinde hizalama AYARLANAMAZ (Figma kısıtlaması) — her text node'da ayrı ayarlanmalı.

Kritik Kural: Bileşen Sizing (ZORUNLU)

Bileşenler ve instance'lar ASLA Fixed width olarak bırakılmamalı (özel durum hariç):

| Durum | layoutSizingHorizontal | Neden | |-------|----------------------|-------| | Button, Tag, Badge | HUG | İçeriğe göre boyutlanır, yazı ortalanır | | Input, Textarea | FILL | Parent genişliğine uyar | | Card | FILL veya FIXED | Responsive grid'e göre | | Icon wrapper | HUG | İkon boyutuna göre |

Kural: Fixed width kullanırsan yazının ortalanmış görünmesini engeller — buton "Kaydet" yazısından geniş kalır ve yazı sola yapışır. HUG kullanırsan buton yazıya sarılır ve auto-layout CENTER düzgün çalışır.

Doğrulama: Faz 4 (4d) adımında boundVariables, stroke, fontSize, text style, text hizalama VE sizing mode kontrol edilmeli.

Toplu variable oluşturma (F-MCP avantajı)

### Kritik Kural: Semantic Token = Alias (ZORUNLU)

**Her semantic token, bir primitive token'a alias (VARIABLE_ALIAS) olarak bağlanmalıdır.** Hiçbir semantic token'da direkt sabit değer (literal value) olmamalıdır.

Eğer semantic token için uygun bir primitive yoksa, **önce primitive oluştur, sonra alias bağla:**

```js
// figma_execute — Primitives'te karşılık yoksa önce oluştur
const primColl = (await figma.variables.getLocalVariableCollectionsAsync()).find(c => c.name === "Primitives");
const newPrim = figma.variables.createVariable("size/touch-min-ios", primColl, "FLOAT");
newPrim.setValueForMode(primColl.modes[0].modeId, 44);
newPrim.description = "iOS minimum touch target. 44pt per Apple HIG.";
newPrim.scopes = ["WIDTH_HEIGHT"];

// Sonra semantic'i alias olarak bağla
const semVar = await figma.variables.getVariableByIdAsync("");
semVar.setValueForMode(semModeId, { type: "VARIABLE_ALIAS", id: newPrim.id });

Bu kural, token sisteminin tutarlılığını garanti eder: primitive değişince tüm semantic'ler otomatik güncellenir.

Toplu variable oluşturma (F-MCP avantajı)

figma_batch_create_variables(
  collectionId="",
  variables=[
    // Aşağıdaki değerler FORMAT örneğidir — çalışma anında DS'den okunur
    { name: "primary/50", type: "COLOR", values: { "Light": "#EEF2FF", "Dark": "#312E81" } },
    { name: "primary/100", type: "COLOR", values: { "Light": "#E0E7FF", "Dark": "#3730A3" } },
    ...
  ]
)

Hata yönetimi: figma_batch_create_variables kısmi başarı dönebilir. Yanıttaki { created, failed } alanlarını kontrol et:

• failed boş değilse: hata mesajını oku, eksik variable'ları tekil figma_create_variable ile oluştur
• created dizisinden variable ID'lerini kaydet — sonraki adımlarda (scope atama, alias bağlama) kullanılacak

Veya figma_setup_design_tokens ile yapılandırılmış kurulum (atomik: ya hepsi başarılı ya hiçbiri).

Scope ayarlama

Variable oluşturduktan sonra scope'ları ayarla (ZORUNLU):

// figma_execute içinde
const variable = await figma.variables.getVariableByIdAsync("");
variable.scopes = ["FRAME_FILL", "SHAPE_FILL"];
return { id: variable.id, scopes: variable.scopes };

Description ve Code Syntax (ZORUNLU)

Her variable'a description ve code syntax ekle. Bu, geliştirici handoff'unda kritik bilgi sağlar:

// figma_execute içinde — description
const variable = await figma.variables.getVariableByIdAsync("");
variable.description = "Primary button background. WCAG AA on white (4.56:1).";

// Code syntax — 3 platform
variable.setVariableCodeSyntax("WEB", "var(--btn-primary-bg)");
variable.setVariableCodeSyntax("ANDROID", "R.color.btn_primary_bg");
variable.setVariableCodeSyntax("iOS", "ButtonColor.primary.bg");
return { id: variable.id, description: variable.description };

İsimlendirme kuralları (Code Syntax):

• Web: CSS custom property: var(--token-name) (kebab-case)
• Android: Resource reference: R.color.token_name veya R.dimen.token_name (snake_case)
• iOS: Swift constant: Color.tokenName veya Spacing.tokenName (camelCase)

Text ve effect style'lar

> Font kuralı: Hardcoded font kullanma. Önce kayıtlı kütüphanenin text style'larından font ailesini oku. Bulunamazsa kullanıcıya sor. Kullanıcı "sen seç" derse Inter kullan.

// FONT_FAMILY ve FONT_STYLE'ı kütüphaneden veya kullanıcıdan al
const FONT_FAMILY = "KütüphanedenOkunanFont"; // ör: "Source Sans Pro", "Inter", vb.
const style = figma.createTextStyle();
style.name = "Heading/H1";
await figma.loadFontAsync({ family: FONT_FAMILY, style: "Bold" });
style.fontName = { family: FONT_FAMILY, style: "Bold" };
style.fontSize = 32;
style.lineHeight = { value: 40, unit: "PIXELS" };
return { styleId: style.id, name: style.name };

Faz 3: Bileşenler (Detay)

Base component

const component = figma.createComponent();
component.name = "Button";
component.layoutMode = "HORIZONTAL";
component.primaryAxisSizingMode = "AUTO";
component.counterAxisSizingMode = "AUTO";
component.paddingTop = component.paddingBottom = 12;
component.paddingLeft = component.paddingRight = 24;
component.cornerRadius = 8;
component.itemSpacing = 8;

// Metin ekle — FONT_FAMILY'yi kütüphaneden veya kullanıcıdan al
await figma.loadFontAsync({ family: FONT_FAMILY, style: "Medium" });
const label = figma.createText();
label.characters = "Button";
label.fontName = { family: FONT_FAMILY, style: "Medium" };
la

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [atezer](https://github.com/atezer)
- **Source:** [atezer/FMCP](https://github.com/atezer/FMCP)
- **License:** MIT
- **Homepage:** https://www.npmjs.com/package/@atezer/figma-mcp-bridge

Install and usage instructions live in the source repository linked above.