Figma Implement Designyazan OpenAI

Figma Implement Design Skill.

Tasarımı projenizin mevcut çatısı içinde uygulamak için Figma bağlamını, ekran görüntülerini ve varlıklarını kullanın.

Figma
Frontend Tasarımı
Geliştiriciye Devir

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

Kaynak İncelemesi · Figma Implement DesignSKILL.md

Görev Figma Çıktılar • Seçilen Figma tasarımıyla eşleşen uygulama bileşenleri veya bir sayfa • Projeye özgü token ve bileşen eşlemeleri • Gerekli sapmaların belgelendiği görsel bir karşılaştırma Başlamadan Önce Bağlı bir Figma MCP, seçilen tasarıma ve hedef depoya erişim ve görsel doğrulama için çalıştırılabilir bir önizleme gerekir.

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

01 İşlevler

Figma Tasarımlarını Mevcut Kod Tabanınızda Uygulayın

Düğüm bağlamını, ekran görüntülerini, varlıkları ve depoya özgü yeniden kullanımı birleştiren, Figma'dan koda bir uygulama iş akışı.

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

Çalışma Yaklaşımı

Figma Implement Design, seçilen bir Figma düğümünden kullanıcının deposundaki koda doğru çalışır. Yapılandırılmış tasarım bağlamını bir ekran görüntüsüyle birleştirir, ardından yerleşimi, token'ları ve varlıkları projenin çatısına uyarlar. Bir tasarım aracının ürettiği React ve yardımcı sınıflar bir temsil olarak ele alınır; uygulamanın mimarisini değiştirme talimatı sayılmaz.

Kaynak yeniden kullanımı vurgular: mevcut düğmeler, girdi alanları, tipografi ve yerleşim yapı taşları mümkün olduğunca genişletilmelidir. Yanıt kesildiğinde karmaşık çerçeveler daha küçük düğüm sorgularına bölünür. Tamamlanma, yalnızca derlenen kod üretmeye değil, gerçek uygulamayı referansla karşılaştırmaya ve duyarlı davranışı, etkileşimleri ve varlıkları kontrol etmeye bağlıdır.

Beklenen Çıktılar

Seçilen Figma tasarımıyla eşleşen uygulama bileşenleri veya bir sayfa
Projeye özgü token ve bileşen eşlemeleri
Gerekli sapmaların belgelendiği görsel bir karşılaştırma

Örnek Brife Göz Atın

Brifden İncelemeye

01
Tam Tasarımı Alın
Düğüme özgü bağlantıyı veya desteklenen masaüstü seçimini çözümleyin, ardından hem yapılandırılmış bağlamı hem de bir ekran görüntüsünü alın.
02
Depoya Uyarlayın
Mevcut bileşenleri ve token'ları yeniden kullanın, sağlanan varlıkları alın; yönlendirme, durum ve veri çekme kurallarını koruyun.
03
Çalışan Arayüzü Karşılaştırın
Yerleşimi, tipografiyi, etkileşim durumlarını, duyarlı kısıtları ve varlık görüntülemeyi seçilen tasarımla karşılaştırarak kontrol edin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Bağlı bir Figma MCP, seçilen tasarıma ve hedef depoya erişim ve görsel doğrulama için çalıştırılabilir bir önizleme gerekir.

İyi Bir Uyum

Onaylanmış Tasarımın UygulanmasıBir bileşen veya ekranın somut bir Figma referansı zaten varsa ve sıradaki adım depo kodu yazmaksa faydalıdır.
Tasarım Sistemini Yeniden KullanmaGörsel uyumun yinelenen bileşen altyapısı oluşturmaması gereken yerleşik bir uygulamaya uygundur.

Kontrol Edilecek Sınırlar

Tuval Düzenleme YokBu Skill'in çıktısı koddur. Figma içinde düğüm oluşturmak veya değiştirmek ayrı bir iş akışına aittir.
Görsel Doğruluk İnceleme GerektirirKaynaktaki piksel uyumu hedefi, üretilen bir uygulamanın zaten eşleştiğinin kanıtı değildir. Oluşturma ve karşılaştırma yine gereklidir.

Bu Girdileri Getirin

Belirli Bir Figma DüğümüDüğüm kimliğini içeren bir çerçeve veya bileşen bağlantısı ya da desteklenen bir masaüstü seçimi sağlayın.
Hedef DepoUygulama konumunu belirtin ve mevcut bileşenleri, token'ları ve kuralları erişilebilir kılın.
Davranışsal GereksinimlerTek bir statik çerçevenin belirlemeyebileceği etkileşim durumlarını ve duyarlılık beklentilerini netleştirin.

03 Önemli Kararlar

Önemli Kararlar

İki Tür Kanıt
Yapılandırılmış özellikler boyutları ve kısıtları açıklar; ekran görüntüsü ise ham değerlerin kaçırabileceği görsel ilişkileri gösterir.
Mevcut Mimari Korunur
İş akışı, ilgisiz bir uygulama stilini olduğu gibi içe aktarmak yerine tasarım çıktısını projenin kendi kurallarına çevirir.

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

Seçilmiş skill'i ajan ortamınıza ekleyin ve Figma'yı ayrıca bağlayın. Bu Beta materyalleri Figma Developer Terms'e tabidir. Uygulamaya başlamadan önce bağlantının seçilen tasarımın bağlamını döndürdüğünü doğrulayın.

Kaynak Dosya (Upstream)

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

Bağlı bir Figma MCP, seçilen tasarıma ve hedef depoya erişim ve görsel doğrulama için çalıştırılabilir bir önizleme gerekir.

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

Mevcut Vue projemizde seçilen ayarlar panelini uygulamak için figma-implement-design kullan. Tam düğüm bağlamını ve ekran görüntüsünü al, form bileşenlerimizi ve token değişkenlerimizi yeniden kullan, sağlanan tasarım varlıklarını kullan. Mevcut veri işlemeyi koru. Oluşturulan paneli masaüstü ve mobil genişliklerde karşılaştır ve Figma çerçevesinden erişilebilirlik kaynaklı her sapmayı belgele.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlerle karşılaştırın.

Uygulama, uygun olduğu yerlerde mevcut bileşenleri ve token'ları kullanır.
Gerçek varlıklar yüklenir; seçilen çerçevenin tipografisi ve boşlukları görsel olarak karşılaştırılır.
Duyarlı ve etkileşimli durumlar, statik bir ekran görüntüsünden çıkarılmak yerine test edilir.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. 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.

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ü açıklar. Upstream davranışı ve gereksinimleri değişebilir.

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

Editoryal Kaynak Özeti

Düğüm bağlamını, ekran görüntülerini, varlıkları ve depoya özgü yeniden kullanımı birleştiren, Figma'dan koda bir uygulama iş akışı.

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

Projemi React kullanmaya zorlar mı?

Hayır. Kaynağa göre araçla üretilen kod bir tasarım temsilidir ve deponun gerçek çatısına çevrilmelidir.

Figma yanıtı kesilirse ne olur?

İş akışı, alt düğümleri bulmak için meta verileri kullanır ve boşlukları tahminle doldurmak yerine ilgili bölümleri ayrı ayrı alır.

Tam Figma değerleri mevcut her token'ın yerine mi geçmelidir?

Kaynak, projenin tasarım sistemi tutarlılığına öncelik verir ve değerler farklı olduğunda asgari, açıklanmış ayarlamalar ister.

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