Bir Figma iş akışı Open Design eklentisine nasıl taşınır

Bir Figma iş akışı genellikle kas hafızası olarak başlar: şu çerçeveleri dışa aktar, şu token'ları senkronize et, şu sunum şablonunu yeniden oluştur, spesifikasyonu mühendisliğe ver. Bu, birinin kafasında yaşayan ve her yeni proje başladığında yeniden anlatılan türden bir iştir.

0.8.0-preview başlığı daha keskin bir talepte bulunuyor: o kas hafızasını bir eklentiye taşıyın. Bir tuvale cıvatalanmış bir panel değil. Yalnızca tek bir ekibin çalıştırabileceği özel bir betik değil. Bir ajanın diğer herhangi bir tasarım görevi gibi aynı yerel öncelikli döngüden alıp yürütebileceği, gözden geçirebileceği ve devredebileceği yeniden kullanılabilir bir Open Design iş akışı.

Bu, 0.8.0-preview eklenti çağrısının pratik versiyonudur. Ekibinizin bugün tekrarlanabilir bir tasarım iş akışı varsa, bu yazı onu eklenti biçimli bir katkıya dönüştürmenin nasıl göründüğünü gösteriyor — hangi dosyalara ihtiyaç duyduğunu, ajanın onu nasıl aldığını ve yayımlandıktan sonra nereye yerleştiğini.

Taşımaya değer iş akışı düşündüğünüzden daha küçük

"Figma'yı değiştir" ile başlamayın. Sinir bozucu, tekrarlanabilir tek bir işle başlayın.

İyi ilk eklenti adayları:

Mevcut iş akışı	Eklenti biçimli versiyon
Bir Figma pazarlama sayfasını dışa aktarıp kodda yeniden oluşturma	Yerleşimi çıkaran, token'ları eşleyen ve bir web eseri üreten figma-migration eklentisi
Bir marka kitini her ay lansman slaytlarına dönüştürme	Bir SKILL.md, örnek varlıklar ve kilitli bir tasarım sistemi olan sunum eklentisi
Her müşteri için aynı mobil onboarding maketini oluşturma	Hedef kitle, ton, özellik listesi ve platform için giriş alanları olan mobil ekran eklentisi
Bir bileşen spesifikasyonunu Storybook'a hazır arayüze dönüştürme	Depoyu okuyan, bileşenleri eşleyen ve gözden geçirilebilir bir diff yazan kod taşıma eklentisi

Birim, tüm tasarım departmanı değildir. Birim, birinin zaten haftada iki kez tekrarladığı tek bir iş akışıdır. Onu tek bir cümleyle tanımlayamıyorsanız — "X'i şu kısıtlamalarla Y'ye dönüştür" — muhtemelen bir değil iki eklentidir ve bir satır Markdown yazmadan önce onu bölmelisiniz.

Open Design'ın beceri katmanının burada önemli olmasının nedeni budur. Bir eklenti, opak bir çalışma zamanı uzantısı değildir. Bir dosya klasörüdür: bir SKILL.md sözleşmesi, isteğe bağlı tasarım sistemleri, isteğe bağlı örnekler ve Open Design'a iş akışını nasıl görüntüleyip uygulayacağını söyleyen bir open-design.json yan dosyası. Sizinle kurallar arasında bir ikili format yoktur, bu da herkesin eklentiyi okuyabileceği, çatallayabileceği veya daha sonra düzeltebileceği anlamına gelir.

Open Design'ın bakış açısı taşınabilirliktir

Eklenti spesifikasyonu sözleşmeyi açıkça belirtir: SKILL.md yürütülebilir ajan sözleşmesi olarak kalır, open-design.json ise marketplace meta verileri, giriş alanları, varsayılanlar, önizlemeler ve bağlam bağlantısı ekler.

Bu, bir iş akışına iki hayat verir. Open Design'da bir önizleme, girdiler, kaynak bilgisi ve tek tıklamayla "kullan" yoluyla bir eklenti olarak görünür. Claude Code, Cursor, Codex, Gemini CLI, OpenClaw veya başka bir beceri kataloğunda, aynı klasör hâlâ düz bir ajan becerisi olarak çalışır, çünkü temel davranış Markdown'da yaşar. Gelecek yıl kullanımdan kalkacak bir çalışma zamanı için yazmıyorsunuz; iki yıl sonra bir ajanın aynı şekilde okuyacağı bir dosya yazıyorsunuz.

Kütüphane incelemesi temel ilkel öğeleri zaten açıklıyor: beceriler, sistemler, adaptörler ve daemon. Eklentiler, bu ilkel öğelerin etrafına dağıtım ve tekrarlanabilirlik ekler — bir ajanın diskte tesadüfen keşfettiği ham beceriden ziyade, bir ekibin gönderdiği, gözden geçirdiği ve yeniden kullandığı birimdir.

Bir Figma'dan koda iş akışı için yüzeyler genellikle şöyle görünür:

Yüzey	Somut dosya
Ajan davranışı	SKILL.md
Open Design meta verileri	open-design.json
Marka veya görsel sözleşme	design-systems/{brand}/DESIGN.md
Örnek çıktı	eklenti klasörünün içinde example.html veya examples/{plugin-id}/example.html
Önizleme medyası	eklenti klasörünün içinde preview/poster.png veya preview/index.html

Sonuç bir ekran görüntüsü üreteci değildir. Görünür bir sözleşmesi olan yeniden kullanılabilir bir ajan iş akışıdır — ajanın izlediği her kural, bir insanın okuyup düzenleyebileceği klasörde durur.

Somut bir taşıma yolu

İşte tek bir Figma açılış sayfası iş akışını taşıyan bir eklenti için minimum yol. Tamamı altı adım ve çoğu Markdown.

1. Tekrarlanabilir işi adlandırın

İşi tanımlayan tek cümleyi yazın: "Tek bir Figma pazarlama çerçevesini, kurumsal marka sisteminde, gözden geçirmeye hazır, duyarlı bir Astro sayfasına dönüştür." Onu bir cümleye sığdıramıyorsanız, sığdırana kadar daraltın. Ad, eklenti kimliğiniz (figma-workflow) ve marketplace'te gösterilen başlık olur.

2. Beceri sözleşmesini yazın

SKILL.md, ajanın okuduğu yürütülebilir sözleşmedir. Ön bilgi becerinin adını ve tetikleyicisini belirtir; gövde ise brief'tir — girdi biçimi, çıktı yolu, kısıtlamalar ve ajanın devretmeden önce kendine uygulaması gereken bir gözden geçirme kontrol listesi.

---
name: figma-workflow
description: Turn one Figma marketing frame into a responsive Astro page in the house brand system.
trigger: When the user provides a Figma frame URL, screenshot, or exported assets for a marketing page.
---

## Input
- A Figma frame URL, a screenshot, or a folder of exported assets.
- The target brand system (defaults to `house`).

## Output
- An Astro page at `src/pages/<slug>.astro`, plus extracted tokens.

## Constraints
- Map Figma styles to the brand system's tokens. Do not invent colors or type.
- Preserve section order and copy. Flag any text that does not fit the grid.
- Mobile-first: every section must reflow at 360px before desktop.

## Review checklist
- [ ] Section IDs match the source frame.
- [ ] No raw hex values — tokens only.
- [ ] Responsive behavior verified at 360 / 768 / 1280.

3. Open Design yan dosyasını ekleyin

open-design.json, çıplak bir beceriyi bir marketplace eklentisine dönüştüren şeydir: başlık, açıklama, bildirilmiş girdiler, önizleme ve kaynak depo. Bu, "kullan" panelini ve kaynak satırını yönlendiren meta veridir.

{
  "id": "figma-workflow",
  "title": "Figma workflow",
  "description": "Port one Figma marketing frame into a responsive Astro page.",
  "inputs": [
    { "key": "figmaSource", "label": "Figma URL or screenshot", "type": "string", "required": true },
    { "key": "brand", "label": "Brand system", "type": "string", "default": "house" }
  ],
  "preview": "preview/poster.png",
  "source": "https://github.com/your-org/your-plugins"
}

4. Tasarım sistemini ekleyin

İş akışı marka kurallarına bağlıysa, rengi ve tipografiyi düzyazıya gömmek yerine design-systems/ altına bir DESIGN.md dosyası ekleyin. Ajan sistemi bir sözleşme olarak alır — OKLch paleti, tipografi rampası, yerleşim duruşu — böylece üretilen on ekran hâlâ tek bir ürün gibi hisseder. Proje ortasında sistemleri karıştırmak da işe yarar, çünkü onlar sadece metindir.

5. Gerçek bir örnek ekleyin

Üretilen bir eseri examples/ altına kaydedin, böylece gözden geçirenler yalnızca vaadi değil çıktıyı da değerlendirebilir. Bilinen-iyi tek bir example.html, bir paragraf açıklamadan daha değerlidir; ajana örüntü eşleştirecek bir şey verir ve bir bakım sorumlusuna onaylayacak bir şey verir.

Bir araya getirildiğinde, eklenti tek, okunabilir bir klasördür:

plugins/community/figma-workflow/
  SKILL.md              # the agent contract: trigger, output, constraints, review
  open-design.json      # marketplace metadata: title, inputs, preview, source
  design-systems/
    house/
      DESIGN.md         # the brand contract the agent must respect
  examples/
    figma-workflow/
      example.html      # one known-good artifact reviewers can judge
  preview/
    poster.png          # marketplace preview media

6. Doğrulayın ve paketleyin

Bir PR açmadan önce eklenti komutlarını çalıştırın. Mevcut CLI yolu küçük harfli bir eklenti kimliği kullanır. İskelet oluşturma sırasında eğik çizgiyle ayrılmış kayıt defteri adlarından kaçının; od plugin scaffold, <out>/<id>/... oluşturur, böylece izleyen komutlar o üretilen klasöre işaret eder:

od plugin scaffold --id figma-workflow --title "Figma workflow" --out ./plugins/community
od plugin validate ./plugins/community/figma-workflow --no-daemon
od plugin pack ./plugins/community/figma-workflow

Eklenti kayıt defteri incelemesine hazır olduğunda, od plugin login ve od plugin whoami --json ile GitHub üzerinden kimlik doğrulaması yapın, ardından mevcut inceleme yolu için yayımlama dokümanlarını izleyin. Open Design, GitHub kimlik bilgilerinizi saklamaz.

Bunun gerçek bir tasarım ekibinde nasıl göründüğü

Bir lansman sayfası için bir Figma çerçevesi, bir kurumsal marka sistemi ve aylık bir yayın ritmi olan küçük bir ürün ekibi hayal edin.

Eklentiden önce, iş akışı bir devir zinciridir: tasarımcı çerçeveleri dışa aktarır, mühendis yerleşimi yeniden oluşturur, PM metni yeniden yazar, biri token kaymasını kontrol eder, başka biri hata dosyalar. İş tanıdıktır, ama hafıza insanlarda yaşar — ve biri izinde olduğunda, ekip değiştirdiğinde veya önemli olan tek kısıtlamayı unuttuğunda her seferinde sızar.

Eklentiden sonra, iş akışı çalıştırılabilir bir esere dönüşür:

Adım	Kim yönlendirir
Eklentiyi seçin	Tasarımcı veya PM
Figma URL / ekran görüntüsü / yerel varlıkları ekleyin	Tasarımcı
Marka sistemini seçin	Tasarımcı veya tasarım mühendisi
Web eserini üretin	Claude Code, Cursor, Codex, Gemini CLI veya tespit edilen başka bir ajan
Bölüm kimliklerini, metni, yoğunluğu ve duyarlı davranışı gözden geçirin	Open Design önizlemesindeki insan
Dosyaları dışa aktarın veya devredin	Aynı yerel proje klasörü

Ekibin hâlâ zevke ihtiyacı var — gözden geçirme adımı onun yaşadığı yerdir ve hiçbir eklenti onun yerini almaz. Eklentinin kaldırdığı şey yeniden anlatmaktır: kısıtlamalar, token haritası ve çıktı yolu kabilesel bilgi olmaktan çıkar ve depoda bir dosya haline gelir.

Sırada ne yapılmalı

Ekibinizin sürekli geri dönen bir Figma dışa aktarımı, token senkronizasyonu, marka kiti veya sunum şablonu varsa, önce en küçük tekrarlanabilir dilimi taşıyın. Bir SKILL.md ile başlayın, open-design.json ekleyin, marka DESIGN.md dosyasını iliştirin, gerçek bir örnek bırakın, doğrulayın ve iş akışı başka kimsenin yeniden kullanamayacağı özel bir araca dönüşmeden önce PR'ı açın. Ekran görüntüsünden prototipe örneği, eklenti biçimli versiyonu baştan sona gösterir: taşınabilir bir beceri artı bir Open Design yan dosyası.

Bu iş akışını deneyin.

İlgili okumalar

• 31 beceri, 72 sistem: Open Design kütüphanesi nasıl çalışır — bir eklentinin sardığı ilkel öğeler
• Open Design'ı neden bir ürün değil, bir beceri katmanı olarak inşa ettik — iş akışının neden hesap biçimli değil dosya biçimli olduğu
• Figma'ya açık kaynaklı alternatif — iş akışınızı taşımanın mevcut lidere göre nereye yerleştiği
• BYOK tasarım iş akışı: Claude, Codex veya Qwen'i kendi anahtarınızla çalıştırın — aynı eklentinin ekibinizin zaten güvendiği model yolunda nasıl çalışabileceği