Tasarım & UX Skill
Accessibility Compliance
Ekran okuyucu desteği, klavye navigasyonu ve mobil erişilebilirlik içeren WCAG 2.2 AA uyumlu arayüzler oluşturmak için bir uygulama araç seti.
₺369
Design Token Parser Specify
Figma'yı kod tabanınıza bağlar; böylece bir tasarımcının renk, font, boşluk veya gölge değişikliği tek bir doğruluk kaynağından geçerek otomatik olarak Tailwind yapılandırmasına, CSS değişkenlerine, Swift ve Kotlin'e akar.
Specify, Style Dictionary ve Tokens Studio Figma eklentisiyle DTCG (W3C taslağı) JSON standardını kullanır. Tasarımcı-geliştirici arasındaki 'ekrandaki renk koddaki renkle uyuşmuyor' kısır döngüsünü bitirir.
₺369 tek seferlik
Bir kit içine ekle → Fiyatlara KDV (%20) dahildir. · Gerçek ajans işinden çıkarıldı · tek seferlik, kilit yok
- Tür Skill
- Kategori Tasarım & UX
- Teslimat E-posta · anında
- Lisans Tek seferlik
Çalışmanın içinden · kara kutu yok
Satın almadan önce işin kendisini gör.
Tasarımcının Figma değişikliğini otomatik olarak üretim koduna taşıyan hat: tek kaynak olarak DTCG JSON, her platforma derleyen Style Dictionary. Çalışma döngüsü şu:
- Müşteriyi önce araç karar ağacından geçirir: 50'nin altında stabil token manuel config demektir ve bu skill fazla kaçar; Figma ve GitHub varken 50 ila 200 token ücretsiz Tokens Studio eklentisi artı GitHub Action demektir; web, iOS ve Android'e yayılan 200 üstü token ücretli Specify katmanı demektir.
- Markayı DTCG standardı JSON'a serileştirir: her token $type ve $value taşır, üç katmanlı alias zinciri olarak örgütlenir (component semantic'e, semantic primitive'e referans verir) ve parse döngüsünü önlemek için derinlik en fazla dörttür.
- Tek JSON kaynağını platform çıktılarına derleyen Style Dictionary config'ini kurar: Tailwind preset, CSS değişkenleri, iOS için Swift sınıfı ve Android için colors.xml. Tek marka değişikliği tüm platformlara aynı anda gider.
- Token değişikliğinde tetiklenen GitHub Action'ı bağlar: DTCG şemasını doğrular ($type eksik token'da fail eder), düşük kontrastlı token'ı PR'da bloklayan WCAG kontrast doğrulamasını koşar, tüm platform artifact'lerini build edip commit eder.
- Üretilen preset'i Tailwind config'e import eder ki kodda asla elle hex yazılmasın, sonra çift yönlü senkron için conflict stratejisi seçer (tasarımcı kazanır, geliştirici kazanır veya diff incelemesi). Figma ile repo sessizce ayrışmaz.
- Bitti kriterleriyle kapatır: tasarımcının Figma'daki renk değişikliği dakikalar içinde önizleme deploy'unda canlıdır ve marka yenileme haftalarca manuel component düzeltmesi yerine tek commit'tir.
Tek güç kaynağı. 6 hat dışarı.
design-token-parser-specify · çekirdek
çekirdek aktif · 6 hat
- ✓ figma renk, tipografi ve
Figma renk, tipografi ve boşluk değişikliklerini koda otomatik senkronlamak
- ✓ web, ios ve android aras…
Web, iOS ve Android arasında tek bir token kaynağı paylaşmak
- ✓ marka yenileme sonrası 5…
Marka yenileme sonrası 50'den fazla bileşeni elle güncellemekten kaçınmak
- ✓ açık/koyu veya yerel ayar
Açık/koyu veya yerel ayar temelli dinamik token değişimi kurmak
- ✓ çakışma çözümüyle figma'…
Çakışma çözümüyle Figma'dan Git'e koda çift yönlü senkronizasyon kurmak
- ✓ renk token'larında wcag
Renk token'larında WCAG kontrastını hat içinde doğrulamak
Aldıkların sende kalır.
Zamanı ileri sar. Ne kaldığını izle.
Sonsuza dek
Sahip olmak tam olarak bu.
Kiralık yığın
yapay zekâ yazım aracı: abonelik
süresi doldu · erişim gittianaliz paketi: abonelik
süresi doldu · erişim gittitasarım platformu: abonelik
süresi doldu · erişim gitti(geriye bir şey kalmadı)
Senin ocağın
-
Marka yenilemelerini haftalarca süren elle düzenlemeden tek bir commit'e indirin
lisans: kalıcı -
Tek bir doğruluk kaynağından web ve mobili piksel düzeyinde aynı tutun
lisans: kalıcı -
'Ben bu rengi dedim, sen başkasını kodladın' sürtüşmesini bitirin
lisans: kalıcı -
Figma değişikliklerini dakikalar içinde bir önizlemede canlı görün
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
Primitive, semantic ve component katmanlı, DTCG uyumlu JSON token şeması
6 parça · tek çalışan sistem · e-postayla anında teslim
Sahadan · yaşanmış vaka
Bu, masa başında yazılmadı.
2026-05-12 · Sorun
Ajansın kendi CD TRIANGLE kimliğinde bir marka tazelemesi (tek bir altın ton ayarı) 18 component'in elle güncellenmesini gerektirdi ve yaklaşık 2 saat sürdü, çünkü renk değerleri tek kaynak olmadan kod tabanına dağınık şekilde gömülüydü.
Müdahale
Marka spec'i 47 token'lık DTCG JSON'a serileştirildi (palet, tipografi, spacing, gölge, radius, semantic alias'lar), Tokens Studio ile Figma'ya aktarıldı ve Tailwind preset ile CSS değişkenleri üreten bir GitHub Action'a bağlandı. Hattan sonra aynı altın ton değişikliği tek Figma düzenlemesi artı push haline geldi, yaklaşık 3 dakikada üretimde canlıydı.
Sonuç
Bu herkes için dövülmedi.
- Araç kiralamayı sahip olmaya tercih ediyorsan, sana göre değil.
- Yığınını senin yerine başkası yönetsin istiyorsan, sana göre değil.
- Tahmin etmekten memnunsan, sana göre değil.
Figma ve kodun, elle token kopyalamadan, web ve mobil genelinde senkron kalmasını isteyen tasarım sistemi ekipleri ve ön yüz geliştiricileri.
o zaman bu senin için dövüldü.Hangi AI ile çalışır
Tasarımı gereği evrensel: her yapay zekada çalışır. Açık Agent Skills + MCP biçiminde gelir (Claude’da yerleşik); ChatGPT, Gemini, Cursor ve Copilot aynı dosyaları kendine uyarlar.
- Claude Yerleşik biçim
- ChatGPT Açık standartla uyarlanır
- Gemini Açık standartla uyarlanır
- Cursor Açık standartla uyarlanır
- Copilot Açık standartla uyarlanır
Aklındakini yakala.
hava temizlendi. seninle ocak arasında hiçbir şey kalmadı.
bir kıvılcım yakala: ocak cevaplar
-
Bunun için Tokens Studio eklentisi ve Specify gerekli mi, yoksa mevcut Figma'mla çalışır mı?
Tokens Studio eklentisi, Specify ve Style Dictionary üzerine kuruludur, yani hareketli parçalar bunlardır. Ekibiniz henüz bu zincirde değilse, kurmak işin bir parçasıdır, sonradan eklenecek bir ayrıntı değil.
-
Bir tasarımcının Figma'daki renk değişikliği gerçekten Swift ve Kotlin koduma ulaşır mı, yoksa sadece web'e mi?
Evet, DTCG JSON token kaynağı Tailwind, CSS değişkenleri, Swift ve Kotlin'i tek yerden besler. Aynı değişiklik her platformda yeniden yazılmak yerine hepsine yayılır.
-
Figma'daki her şeyi mi senkronlar, yoksa sadece tasarım token'larını mı?
Token katmanını yönetir; renk, tipografi, boşluk ve gölge. Bileşen mantığı, düzen ve davranış token değildir, bunlar normal kod akışınızdan geçer.
-
Nasıl teslim edilir?
Satın alımdan hemen sonra e-posta ile iletilir, kuruluma hazır, anında indirilir; bekleme yok.
-
Tek seferlik mi, abonelik mi?
Tek seferlik alımdır; abonelik veya gizli ücret yoktur. Fiyata KDV (%20) dahildir.
-
İade alabilir miyim?
Dijital ürün olduğu için indirildikten sonra iade yapılmaz. Bu yüzden ne içerdiğini ve kime uygun olduğunu burada açıkça paylaşıyoruz.