Figma Code Connect Componentsyazan OpenAI

Figma Code Connect Components Skill.

Bir tasarım bileşeni ile uygulanmış hali arasındaki ilişkiyi açık hale getirin.

Figma
Tasarım Sistemleri
Geliştirici Devri

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

Kaynak İncelemesi · Figma Code Connect ComponentsSKILL.md

Görev Figma Çıktılar • Önerilen Figma düğümü-kod bileşeni eşleşmelerinin listesi • Kaynak yolları ve çerçeve etiketleriyle onaylanmış Code Connect eşlemeleri • Bağlanan, atlanan ve başarısız olan eşlemeleri ayıran bir özet Başlamadan Önce Bağlı Figma MCP, yayımlanmış bileşenlere ve kod tabanına erişim ile güncel Code Connect yetkisi ve düzenleme izinleri.

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

01 İşlevler

Yayımlanmış Figma Bileşenlerini Kodlarıyla Eşleyin

Onaylanmış Code Connect eşlemelerini keşfetmek, incelemek ve yazmak için bir Figma MCP iş akışı.

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

Çalışma Yaklaşımı

Figma Code Connect Components bir ekran üreticisi değil, bir eşleme iş akışıdır. Bir Figma seçimindeki eşlenmemiş yayımlanmış bileşenleri bulur, yerel kod tabanında arama yapar ve bileşen yapısını ile özelliklerini karşılaştırır. Aynı ada sahip olmak yalnızca bir başlangıç noktasıdır; varyant seçenekleri, varsayılan değerler ve amaç da örtüşmelidir.

Kaynak, herhangi bir eşleme oluşturulmadan önce önerilen eşleşmelerin kullanıcıya gösterilmesini şart koşar. Kısmi onay desteklenir; belirsiz veya eksik bileşenler tahmin edilmez, raporlanır. Çıktı, keşfedilebilir bir tasarım-kod bağlantısıdır; iki tarafı otomatik olarak yeniden yazmaz ve görünümlerinin birebir aynı olduğunu kanıtlamaz.

Beklenen Çıktılar

Önerilen Figma düğümü-kod bileşeni eşleşmelerinin listesi
Kaynak yolları ve çerçeve etiketleriyle onaylanmış Code Connect eşlemeleri
Bağlanan, atlanan ve başarısız olan eşlemeleri ayıran bir özet

Örnek Brief'e Bak

Brief'ten İncelemeye

01
Yayımlanmış Bileşenleri Belirleyin
Düğüme özel bir Figma bağlantısı veya desteklenen masaüstü seçimi kullanın ve hangi bileşenlerin eşlenmemiş kaldığını keşfedin.
02
Uygulamaları Karşılaştırın
Depoyu arayın; gerçek dışa aktarımları, özellikleri ve varsayılan değerleri inceleyin. Birden fazla bileşen uygun olabiliyorsa alternatifleri sunun.
03
Onaylanan Kümeyi Bağlayın
Yalnızca kullanıcının onayladığı eşlemeleri gönderin, ardından başarılı ve başarısız öğeleri ayrı ayrı raporlayın.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Bağlı Figma MCP, yayımlanmış bileşenlere ve kod tabanına erişim ile güncel Code Connect yetkisi ve düzenleme izinleri.

İyi Bir Uyum

Kütüphane DevriTasarımcılar ve geliştiriciler birbirine karşılık gelen bileşen kütüphaneleri tutuyor ancak aralarındaki bağlantılar belirsizse faydalıdır.
Kademeli Eşleme TemizliğiDaha önce eşlenmiş bileşenlerle birkaç yeni öğeyi birlikte içeren bir seçime uygundur.

Kontrol Edilecek Sınırlar

Yayımlanmış Bileşenler Gerekirİncelenen iş akışı, rastgele dikdörtgenler veya paylaşılmamış taslak bileşenler için değil, yayımlanmış bileşenler ya da bileşen kümeleri içindir.
Erişim AyrıdırEşleme oluşturmadan önce Figma planınızın Code Connect'i desteklediğini, düzenleme izniniz olduğunu ve çalışan bir bağlantınız bulunduğunu kontrol edin.

Bu Girdileri Hazırlayın

Figma SeçimiHedef düğüm kimliğini içeren bir dosya bağlantısı veya desteklenen bir masaüstü bağlantısı üzerinden seçilmiş bir düğüm sağlayın.
Kod DeposuDışa aktarımlar ve özellikler incelenebilsin diye uygulama dosyalarını erişilebilir kılın.
Eşleme OnayıÖnerilen eşleşmeler yazılmadan önce hepsini, bazılarını veya hiçbirini seçin.

03 Önemli Kararlar

Önemli Kararlar

Özellik Düzeyinde Eşleme
Varyant ve boyut arayüzlerini karşılaştırmak, yalnızca adı aynı olan bileşenler arasında yanıltıcı bağlantı kurulmasını azaltır.
Açık Kısmi Başarı
Başarısız veya atlanan bir bileşen, genel bir başarı mesajının arkasında kaybolmaz; devirde görünür kalı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

Seçilmiş skill'i ajan ortamınızın desteklenen mekanizmasıyla kurun ve Figma'yu ayrıca bağlayın. Bu Beta materyalleri MIT değil, Figma Geliştirici Şartları kapsamındadır. Kurulum, Code Connect erişimi sağlamaz.

Yukarı Akış Kaynak Dosyası

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-code-connect-components/SKILL.md

Bağlı Figma MCP, yayımlanmış bileşenlere ve kod tabanına erişim ile güncel Code Connect yetkisi ve düzenleme izinleri.

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

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

Örnek Brief

Bu Figma çerçevesindeki yayımlanmış bileşenleri incelemek ve depomuzdaki uygulamalarını bulmak için figma-code-connect-components kullan. Varyant özelliklerini ve varsayılan değerleri karşılaştır, önerilen kaynak yollarını göster ve eşleme oluşturmadan önce onayımı bekle. Bir bileşenin makul iki eşleşmesi varsa sessizce seçim yapmak yerine farkı açıkla.

Sonucu İnceleyin

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

Önerilen her kaynak yolu, bileşenin gerçek dışa aktarımını işaret eder.
Yalnızca açıkça kabul edilen eşlemeler oluşturulur.
Yayımlanmamış, zaten eşlenmiş veya izin nedeniyle engellenmiş öğeler doğru biçimde raporlanır.

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ı Oku

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-code-connect-components/SKILL.md
Lisans: Figma şartları
İncelenen Anlık Görüntü: 2026-10-07 · 49f948faa925

Editoryal Kaynak Özeti

Onaylanmış Code Connect eşlemelerini keşfetmek, incelemek ve yazmak için bir Figma MCP iş akışı.

Bağlantısı verilen 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

Uygulama kodu üretir mi?

Hayır. Tasarım bileşenlerini mevcut uygulamalarla eşler. Bir Figma çerçevesinden kod oluşturmak ayrı bir iş akışıdır.

Yayımlanmamış bileşenleri bağlayabilir mi?

İncelenen kaynak, Code Connect'in bileşenleri eşleyebilmesi için önce bir takım kütüphanesinde yayımlanmaları gerektiğini belirtir.

Yalnızca bir eşleşmeyi onaylayabilir miyim?

Evet. İş akışı, önerilen eşlemelerin hepsini, bazılarını veya hiçbirini kabul etmeyi açıkça destekler.

OpenDesign

Bir Sonraki Tasarım Yinelemesine 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.

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