Figma Generate Designyazan OpenAI

Figma Generate Design Skill.

Tasarım sistemiyle bağlantısı korunan, düzenlenebilir bir Figma ekranı oluşturun.

Figma
Arayüz Tasarımı
Tasarım Sistemleri

OpenDesign İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Figma Generate DesignSKILL.md

Görev Figma Çıktılar • Bileşen örneklerinden oluşan yeni veya güncellenmiş bir Figma ekranı • Yeniden kullanılabilir stillerle değişkenlere bağlı renkler, boşluklar ve köşe yarıçapları • Kaynağa karşı bölüm ve tam ekran görsel kontrolleri Başlamadan Önce Bağlı Figma MCP, hedef dosyaya erişim, yayımlanmış bir tasarım sistemi ve tuval işlemleri için yardımcı figma-use Skill'i.

Editoryal özet · kaynak inceleme tarihi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Mevcut Tasarım Sistemi Varlıklarından Figma Ekranları Oluşturun

Mevcut kütüphane bileşenleri ve değişkenlerinden Figma ekranları oluşturur; her bölümü bir araya getirilirken kontrol eder.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Figma Generate Design koddan tasarıma yönünde çalışır: teslim edilen şey uygulama kodu değil, Figma içindeki bir ekrandır. Sayfayı oluşturmadan önce mevcut bileşen örneklerini, kütüphane değişkenlerini ve metin veya efekt stillerini bulur. Kaynak, sabit değerlerle benzer görünen kutular çizmek yerine yeniden kullanımı tercih eder.

Birleştirme stratejisi aşamalıdır. Önce bir sarmalayıcı çerçeve oluşturulur, ardından her bölüm bunun içinde kurulur ve incelenir. Bileşen metin özellikleri ve varsayılan varyantlar kaynak koda göre kontrol edilir; bölüm ekran görüntüleri ise küçültülmüş tam sayfa görünümünde kaybolabilecek kesilmiş metinleri ve kalan yer tutucuları yakalar. Sonuç, yalnızca uygulamanın ekran görüntüsü değil, düzenlenebilir tasarım sistemi örnekleri olmalıdır.

Beklenen Çıktılar

Bileşen örneklerinden oluşan yeni veya güncellenmiş bir Figma ekranı
Yeniden kullanılabilir stillerle değişkenlere bağlı renkler, boşluklar ve köşe yarıçapları
Kaynağa karşı bölüm ve tam ekran görsel kontrolleri

Örnek Brife Göz Atın

Brifden İncelemeye

01
Kaynak Ekranı Haritalayın
Bölümlerini, bileşenlerini ve varsayılan prop değerlerini okuyun. Hedef Figma dosyasını ve mevcut sistem kurallarını belirleyin.
02
Varlıkları Bulun ve Yeniden Kullanın
Mevcut ekranları inceleyin ve bağlı kütüphanelerde bileşen, değişken ve stil arayın. Yerel değişken sonucunun boş olması, uzak token'ların olmadığını kanıtlamaz.
03
Bölümleri Oluşturun ve Doğrulayın
Önce sarmalayıcıyı oluşturun, bölümleri tek tek birleştirin ve devam etmeden önce metni, varyantları ve yerleşimi inceleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır

Bağlı Figma MCP, hedef dosyaya erişim, yayımlanmış bir tasarım sistemi ve tuval işlemleri için yardımcı figma-use Skill'i.

Uygun Durumlar

Koddan Figma'ya AktarımÇalışan bir uygulama ekranının, bileşen kütüphanesine bağlı düzenlenebilir bir tasarım karşılığına ihtiyaç duyduğu durumlarda kullanışlıdır.
Mevcut Ekranları GüncellemeTüm Figma sayfasını yeniden oluşturmadan içerik veya varyantlarda hedefli değişiklikler yapmaya uygundur.

Kontrol Edilecek Sınırlar

Tasarım Sistemi Erişimi GerekirBelgelenen iş akışı, yayımlanmış bileşenlere veya bir ekip kütüphanesine erişimi ve kullanılabilir bir Figma MCP bağlantısını varsayar.
Figma'dan Koda DeğildirBir tasarımdan uygulama kodu üretmek, bu Skill'in birincil yönünün açıkça dışındadır.

Bu Girdileri Hazırlayın

Hedef Figma DosyasıEkranın oluşturulacağı veya güncelleneceği dosyayı ya da sayfayı belirtin.
Ekran KaynağıUygulama kodunu veya gerçek metinler içeren, bölüm bölüm somut bir brifi sağlayın.
Kütüphane BağlamıBileşenleri ve token'ları yeniden kullanılacak mevcut ekranları veya yayımlanmış kütüphaneleri belirtin.

03 Önemli Kararlar

Önemli Kararlar

Uzak Token'lar Bulunabilir
Kaynak, yerel değişkenlerle bağlı kütüphane değişkenlerini ayırır; böylece gereksiz yinelenen token sistemlerinden kaçınılır.
Bölüm Düzeyinde İnceleme
Bölümleri tek tek kontrol etmek, yanlış varyantları ve kesilmiş metinleri tüm sayfanın tek bir küçük görüntüsüne göre daha kolay yakalamayı sağlar.

04 Örnek Görev Tanımı

Odaklı Bir Brif Deneyin

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

Kurulumu İnceleyin

figma-use ve API referanslarını bu iş akışıyla birlikte erişilebilir tutun. Bu Beta materyaller Figma Geliştirici Koşulları kapsamındadır. Yalnızca Skill'i yüklemek bir Figma dosyasını bağlamaz veya yetkilendirmez.

Yukarı Akış Kaynak Dosyası

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-design/SKILL.md

Bağlı Figma MCP, hedef dosyaya erişim, yayımlanmış bir tasarım sistemi ve tuval işlemleri için yardımcı figma-use Skill'i.

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

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif

Belirtilen Figma dosyasında hesap ayarları ekranımızı yeniden oluşturmak için figma-generate-design kullan. Yayımlanmış bileşenlerini ve değişkenlerini yeniden kullan, kodun varsayılan prop'larını incele ve gerçek etiketleri koru. Önce sarmalayıcıyı, ardından bölümleri tek tek oluştur. Ekranı tamamlandı olarak nitelemeden önce bölüm ekran görüntülerini göster; kesilmiş metinleri veya yer tutucu içeriği düzelt.

Sonucu İnceleyin

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

Kontroller, elle çizilmiş yedekler değil, bağlı bileşen örnekleridir.
Metin ve varyantlar, varsayılan prop'lar dahil, sağlanan ekranla eşleşir.
Bölüm ekran görüntülerinde kesilmiş etiket, üst üste binme veya kalan yer tutucu yoktur.

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

OpenDesign İndir Hızlı Başlangıcı Okuyun

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü anlatır. Kaynaktaki davranış ve gereksinimler değişebilir.

Kaynak Sahibi: OpenAI
Depo: openai/skills
Skill Dosyası: skills/.curated/figma-generate-design/SKILL.md
Lisans: Figma koşulları
İncelenen Sürüm: 2026-10-07 · 49f948faa925

Editoryal Kaynak Özeti

Mevcut kütüphane bileşenleri ve değişkenlerinden Figma ekranları oluşturur; her bölümü bir araya getirilirken kontrol eder.

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

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Çıktı bir ekran görüntüsü mü?

Ana iş akışı düzenlenebilir Figma düğümleri ve örnekleri oluşturur. Yakalanmış bir web sayfası referans olabilir, ancak amaçlanan nihai ekran yapısı değildir.

Yerel değişken bulunamazsa ne olur?

Kaynak, bağlı kütüphanelerin de kontrol edilmesini söyler. Uzak yayımlanmış değişkenler, yerel değişken API tarafından döndürülmez.

Bir ekranın yalnızca bir kısmını güncelleyebilir mi?

Evet. Mevcut bölümleri bulup etkilenmeyen alanları koruyarak metinlerini, varyantlarını veya yerleşimlerini değiştirebilir.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

Brifinizi, 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.

OpenDesign İndir Tasarım Skill'lerine Göz Atın