Kullanım kılavuzuna geç
Figma Generate Libraryyazan OpenAI

Figma Generate Library Skill.

Token modeliyle başlayın, ardından yeniden kullanılabilir bileşenleri kontrollü bir sırayla geliştirin.

  • Figma
  • Tasarım Sistemleri
  • Bileşen Kütüphaneleri
Kaynak İncelemesi · Figma Generate LibrarySKILL.md
Görev Figma Çıktılar • Figma değişken koleksiyonları, anlamsal takma adlar (alias) ve metin ya da efekt stilleri • Kontrollü varyant setlerine sahip, dokümante edilmiş yeniden kullanılabilir bileşenler • Bir durum kaydı (state ledger) ile son bağlama, adlandırma ve görsel inceleme Başlamadan Önce Figma MCP; düzenlenebilir dosya erişimi, depo erişimi ve eşlik eden figma-use Skill'i ile yardımcı referanslar gerekir.
Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Kod Temellerinden Bir Figma Kütüphanesi Oluşturun

Bileşenlerden önce Figma değişkenlerini ve stillerini oluşturur; her aşamada kaydedilmiş bir durum kaydı ve onay kullanır.

Kaynağa dayalı iş akışıYürütme kıyaslaması değildir

Çalışma Yaklaşımı

Figma Generate Library, tek seferde ekran üreten bir araç değil, çok aşamalı bir tasarım sistemi iş akışıdır. Kodu, mevcut Figma dosyasını ve abone olunan kütüphaneleri karşılaştırır, ardından yazmadan önce tanımlı bir token ve bileşen kapsamını kilitler. Değişkenler ve stiller bileşenlerden önce gelir; böylece görsel özellikler tutarlı bir temele bağlanabilir.

Kaynak, uzun süren işlerdeki duruma özel önem verir: oluşturulan kimlikler (ID), deterministik adlar ve kaydedilmiş bir ledger, düğümleri çoğaltmadan kaldığı yerden devam etmeyi sağlar. Bileşen çalışması varyant düzenini, metin ve boolean özelliklerini, ikon değişimlerini ve dokümantasyonu içerir. İnsan onay noktaları iş akışının parçasıdır; özellikle kod ile Figma uyuşmadığında önemlidir. Skill hangi sistemin esas alınacağına sessizce karar vermez.

Beklenen Çıktılar

  • Figma değişken koleksiyonları, anlamsal takma adlar ve metin ya da efekt stilleri
  • Kontrollü varyant setlerine sahip, dokümante edilmiş yeniden kullanılabilir bileşenler
  • Bir durum kaydı ile son bağlama, adlandırma ve görsel inceleme
Örnek Brief'i Gör

Brief'ten İncelemeye

  1. 01
    Keşfedin ve Kapsamı Kilitleyin

    Kod ve Figma varlıklarının envanterini çıkarın, kütüphaneleri arayın ve oluşturmadan önce ilk token ve bileşen setinde tam olarak anlaşın.

  2. 02
    Temelleri Oluşturun

    İlkel (primitive) ve anlamsal değişkenleri, modları, kapsamları ve kod sözdizimini; ardından tipografi ve efektleri oluşturun. Temel onayını alın, sonra sayfa yapısını ve temel dokümantasyonunu oluşturup bileşenlere başlamadan önce ayrı bir onay alın.

  3. 03
    Bileşenleri Adım Adım Geliştirin

    Her seferinde bir bileşeni; değişken bağlamaları, özellikler ve dokümantasyonla oluşturun. Yapıyı ve görünümü doğrulayın, ekran görüntüsünü gösterin ve sonraki bileşene başlamadan önce onay alın.

  4. 04
    Uzlaştırın ve Denetleyin

    Adlandırmayı, çözülmemiş bağlamaları ve isteğe bağlı Code Connect eşlemelerini; tahmin yürütmek veya geniş çaplı temizlik yapmak yerine kaydedilmiş kimlikleri kullanarak inceleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır

Figma MCP; düzenlenebilir dosya erişimi, depo erişimi ve eşlik eden figma-use Skill'i ile yardımcı referanslar gerekir.

Uygun Durumlar

  • Koddan Kütüphaneye UyumUygulanmış token'ların ve bileşenlerin sürdürülebilir bir Figma karşılığına ihtiyaç duyduğu durumlarda faydalıdır.
  • Kontrollü Kütüphane OnarımıBazı varlıkların yeniden kullanılabildiği, bazılarının sarmalandığı ve birkaçının yeniden oluşturulduğu bir boşluk analizine uygundur.

Kontrol Edilecek Sınırlar

  • Tek Çağrılık Bir Üretici DeğildirKaynak, aşamalı çalışmayı ve onay noktalarını açıkça gerektirir. Büyük bir bileşen kütüphanesi tek işlemde güvenle oluşturulabilirmiş gibi sunulmamalıdır.
  • Çakışmalar Sahiplik Kararı GerektirirKod ile Figma farklılaştığında, hangi değerin veya bileşen sözleşmesinin geçerli olacağına bir ürün ya da tasarım sahibi karar vermelidir.

Bu Girdileri Hazırlayın

  • Kod ve Figma EnvanterleriDepoyu ve düzenlenebilir hedef dosyayı, mevcut token kurallarıyla birlikte sağlayın.
  • İlk Kapsamİlk kullanılabilir sürüm için gereken token koleksiyonlarını, modları ve bileşen ailelerini belirtin.
  • İnceleme SorumluluğuTemelleri, bileşenleri ve mevcut sistemler arasındaki çakışmaları kimin onaylayabileceğini belirleyin.

03 Önemli Kararlar

Önemli Kararlar

  1. Anlamsal Takma Adlar

    Kaynak, ham değerleri bileşenler boyunca tekrarlamak yerine ham ilkelleri (primitive) mod duyarlı anlamsal token'lardan ayırır.

  2. Devam Ettirilebilir Oluşturma

    Kaydedilmiş bir düğüm kaydı ve deterministik adlandırma, yarıda kalan kütüphane çalışmasını kopya oluşturmadan sürdürmeyi kolaylaştırır.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

Aşağıdaki örnek brief test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

Yardımcı betikler ve aşama referansları dahil, düzenlenmiş klasörün tamamını kullanın. Bu Beta materyalleri Figma Geliştirici Koşulları'na tabidir. Figma yazma işlemlerini ve kütüphane yayınlamayı ayrıca yetkilendirilmesi gereken işlemler olarak değerlendirin.

Kaynak Dosyası (Upstream)
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

Figma MCP; düzenlenebilir dosya erişimi, depo erişimi ve eşlik eden figma-use Skill'i ile yardımcı referanslar gerekir.

Tek Bir Çıktıyla Başlayın

Skill'i çalıştırmadan önce bu brief'teki kapsamı, kaynak materyali ve kısıtları kendinize göre uyarlayın.

Örnek Brief
Kod tabanımıza uygun küçük bir kütüphaneyi planlamak için figma-generate-library kullan: açık ve koyu modlu renk token'ları, boşluk, tipografi, Button ve Input. Salt okunur keşifle başla ve kod ile Figma arasındaki çakışmaları göster. Yazma işlemlerinden önce kapsam onayını bekle, önce temelleri oluştur ve her bileşenin ayrı ayrı incelenip devam ettirilebilmesi için bir durum kaydı tut.

Sonucu İnceleyin

Gerçek çıktıyı şu gözlemlenebilir ölçütlere göre kontrol edin.

  • Anlamsal değişkenler ilkellere takma ad (alias) olur ve amaçlanan modları ile kapsamları taşır.
  • Bileşen varyantları ve ikon değişimleri, gereksiz kombinasyonlar olmadan üzerinde anlaşılan sözleşmeyle uyumludur.
  • Kaydedilmiş kimlikler, ekran görüntüleri ve bağlama kontrolleri tamamlanan her aşamayı destekler.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sunar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
OpenAI
İncelenen Sürüm
2026-10-07 · 49f948faa925
Editoryal Kaynak Özeti
Bileşenlerden önce Figma değişkenlerini ve stillerini oluşturur; her aşamada kaydedilmiş bir durum kaydı ve onay kullanır.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları, tarihli bir popülerlik göstergesidir; skill kullanımı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Bu, ekran üretmekten nasıl farklıdır?

Ekranların kullandığı yeniden kullanılabilir temelleri ve bileşenleri; token koleksiyonları, varyantlar ve dokümantasyon dahil olmak üzere oluşturur.

Canvas yazma işlemleri paralel çalışabilir mi?

Kaynak, durumun ve dönen düğüm kimliklerinin güvenilir kalması için Figma değişikliklerinin sıralı yapılmasını açıkça gerektirir.

Mevcut bir kütüphanenin yerini otomatik olarak alır mı?

Hayır. Oluşturmadan önce keşif ve kapsam onayı gelir; yeniden kullanım stratejisi, içe aktarmalardan veya yeni bileşenlerden önce mevcut yerel varlıklara öncelik verir.

OpenDesign

Bir Sonraki Tasarım İterasyonuna Yer Açın.

Brief'inizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

Kaynak Dosyası (Upstream)
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md