figmayazan HeyGen

Figma Skill.

Claude Code ve Codex için bir hareket ve video skill'i: Figma varlıklarını, marka tokenlarını ve storyboard'ları bir HyperFrames kompozisyonuna aktarır.

Motion & Video
Video

OpenDesign İndir Kullanım kılavuzunu görüntüle

heygen-com/hyperframes · skills/figma/SKILL.mdSKILL.md

--- name: figma description: Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition. --- ## Auth — two credentials, scoped ## Routing ## Assets (Phase 1 — CLI) ## Tokens (Phase 2 — CLI) ## Components (Phase 3 — CLI) ## Motion (Phase 4 — connector-assisted)

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 17.829 karakter

01 Ne yapar

figma Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Figma içeriğini beş aşamada HyperFrames kompozisyonlarına aktarır: statik varlıklar, marka token'ları, HTML olarak bileşenler, hareket zaman çizelgeleri ve shader'lar. Mümkün olduğu her yerde (varlıklar, token'lar, bileşenler) REST API kullanır; hareket ve shader verileri için isteğe bağlı bir bağlayıcı kullanılabilir. Her içe aktarma, kaydedilen köken bilgisiyle birlikte üretimleri yerel olarak dondurur, böylece render işlemleri Figma'yı hiç çağırmaz ve deterministik kalır.

Storyboard yeniden yapılandırması, kareleri slayt olarak değil, zaman içindeki öğe durumunu tanımlayan anahtar kareler olarak ele alır. Bir marka değişkeni güncellendiğinde içe aktarılan her bileşenin yeniden renklendirilmesini sağlayan token-bileşen bağlama desteği vardır. Hız sınırlarına duyarlıdır ve otomatik olarak yeniden dener. Yapılandırılmış token'ın erişebildiği her Figma dosyasında çalışır.

Neler üretir

.media/images/ altında, manifest kökeni ve img snippet'i ile dondurulmuş görsel varlıklar
Marka token girdileri, figma-tokens.json yan dosyası ve .media/figma-bindings.jsonl içindeki bağlama-indeksi kayıtları
compositions/components/<name>/ altında düzenlenebilir HTML bileşen paketleri
CDN etiketlerinden sonra eklenen, duraklatılmış ve sonlu, window.__timelines üzerinde kayıtlı GSAP zaman çizelgesi betikleri

Örnek istemi görün ↗

Nasıl Çalışır

01
Figma Referansını Ayrıştır
Kullanıcının URL'sinden, fileKey:nodeId dizesinden veya salt fileKey'den fileKey ve nodeId çıkarmak için parseFigmaRef kullanın.
02
Amaca Göre Doğru Aşamaya Yönlendir
Kullanıcının isteğini beş aşamadan birine eşleştirin: varlık dışa aktarma, token içe aktarma, bileşen yeniden yapılandırma, hareket zaman çizelgeleri veya shader işleme.
03
REST veya Bağlayıcı Üzerinden Getir
Varlıklar, token'lar ve bileşenler için REST kullanılır. Hareket ve shader'lar için uyumlu bir bağlayıcı veya manuel dışa aktarma gerekir.
04
Üretimleri Köken Bilgisiyle Yerel Olarak Dondur
Her içe aktarma yerel bir dosya yazar, manifest'e kaynak meta verisiyle ekleme yapar ve paylaşılan medya kullanım envanterini yeniden oluşturur.
05
Durum Verilerinden Hareket ve Storyboard'ları Yeniden Yapılandır
Storyboard kareleri, bitişik kareler karşılaştırılarak öğe zaman çizelgelerine dönüştürülür. Hareket bağlamı MotionDocs'a, ardından GSAP betiklerine normalize edilir.
06
Gerçek Referansa Göre Doğrula
Statik doğruluk için render'ı Figma'nın kendi piksel dışa aktarımıyla karşılaştırın. Hareket yeniden yapılandırması en az 15dB motion-PSNR değerini karşılamalıdır.

02 Uyumunuzu bulun

figma Skill Ne Zaman Kullanılır

Bu tür hareket ve video işleri için Claude Code veya Codex'te figma skill'i kullanın. Aşağıdaki uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Kullanıcı bir figma.com bağlantısı yapıştırır veya bir Figma tasarımını bir videoya veya kompozisyona getirmeyi ister
Bir Figma dosyasından marka renklerini, token'ları veya stilleri kompozisyon değişkenlerine çekme
Bir Figma karesinden düzenlenebilir HTML bileşeni olarak sahne oluşturma
Sahne karelerini anahtar kare olarak içeren bir storyboard bölümünden animasyonu yeniden yapılandırma

Sınırları Bilin

Uyumlu bir Figma bağlayıcısı olmadan hareket ve shader içe aktarma, manuel yerel dışa aktarmalar gerektirir
Figma'nın connector render yolu shader'ları çalıştırmaz; bunlar temel renge düzleştirilir
REST variables API'si Enterprise'a özel; diğer planlar yayımlanmış stil meta verisine indirgenir
Tutarlı bir ürün UI'sini gösteren storyboard kareleri, element zincirleri değil, uygulamayı canlı DOM olarak yeniden oluşturmaya yükseltilir

Ne Sağlamalısınız

Figma kişisel erişim token'ıSalt okunur kapsamlar: File content, File metadata, isteğe bağlı olarak Library content ve Variables. Shell veya .env içinde FIGMA_TOKEN olarak ayarlayın.
Uyumlu Figma connector (isteğe bağlı)Token'dan ayrı bir yetkilendirme. Hareket zaman çizelgeleri ve shader kaynağı için gereklidir. Yoksa native export isteyin.
Storyboard amacı için yönetmen notlarıStoryboard şeridinin altındaki TEXT node'ları nasıl animasyon yapılacağını açıklar. Sahnelerle x-aralığı örtüşmesine göre eşleştirilir.
Shader'lar için native Figma exportConnector yolu shader'ları çalıştırmadığında veya connector mevcut olmadığında Figma'dan doğrudan export edilen PNG veya Motion MP4.

03 Skill'in içinde

figma Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 7 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

İlk CLI Çağrısından Önce Token'ı Kontrol Edin
Herhangi bir hyperframes figma komutu çalıştırmadan önce, FIGMA_TOKEN'ın shell env veya proje .env içinde mevcut olduğunu doğrulayın. İkisi de yoksa, kullanıcıyı tek seferlik kurulum boyunca yönlendirin ve durun.
Asset'ler için Her Zaman --description Geçin
Her asset import'u ne olduğunu belirten bir --description içermelidir. Bu, index satırı ve img alt text'i haline gelir. Adlandırılmış marka işaretleri için --entity ekleyin.
Dosya Başına Bir İstekte Node'ları Toplu İşleyin
Aynı dosyanın birden fazla ref'ini boşlukla ayrılmış veya virgülle birleştirilmiş argümanlar olarak geçin. Rate limit'leri önlemek için tümü tek bir /v1/images çağrısında render edilir.
Bileşenlerden Önce Token'ları İçe Aktarın
Bileşenleri içe aktarmadan önce hyperframes figma tokens komutunu çalıştırın. Bu, bileşen renklerinin yinelenen değerler yerine marka değişkenlerine bağlanmasını sağlar.
Composition İçinde Asla Figma URL'leri Bırakmayın
Önce tüm Figma içeriğini yerel dosyalara dondurun. Render, deterministik çıktı için yalnızca yerel dosyaları görmelidir.
Asla Repeat: -1 Üretmeyin
Zaman çizelgeleri durdurulmuş, sonlu olmalı ve literal window.__timelines anahtarlarına sahip olmalıdır. Sonsuz döngü olmamalıdır.
Kullanıcı İçin Her Adımı Anlatın
Her komuttan önce Figma'dan neyi çektiğinizi söyleyin. Sonrasında, nereye ulaştığını, composition'da neyin değiştiğini ve hemen sonraki eylemi belirtin.

04 İşe koyun

Claude Code veya Codex'te figma kurun

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

figma'yı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill figma

skills/figma/SKILL.md için genel skills CLI biçimi; repository kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Import the hero section from [figma.com/file/abc123/Brand?node-id=42-1] including the logo, headline text, and background. Pull the brand tokens from the same file so the colors stay linked to our design system variables. Then build the animation timeline — the logo should scale in with a burst effect and the headline should slide from the left.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Motion veya bileşen import'unu tamamlanmış olarak işaretlemeden önce npx hyperframes check komutunu çalıştırın
verify-motion.mjs betiğini kullanarak motion reconstruction'ın minimum 15dB motion-PSNR'yi geçtiğini doğrulayın
Varlık içe aktarmalarının fileKey:nodeId:format:scale:version başına idempotent olduğunu doğrulayın, yalnızca değişen içeriği yeniden içe aktarın

OpenDesign içinde figma'yı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Dal main
Skill dosyası: skills/figma/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 558c11b
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 49.761 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm heygen-com/hyperframes deposu için alınmıştır; bu depoda katalogda yer alan 9 skill bulunmaktadır. figma için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Figma → HyperFramesBeş aşamalı yetenek ayrımı: varlıklar, token'lar, bileşenler REST üzerinden; hareket ve shader'lar konektör veya manuel dışa aktarma yoluyla
Kimlik doğrulama — kapsamlandırılmış iki kimlik bilgisiSalt okunur kapsamlarla REST için kişisel erişim token'ı; motion/shaders için ayrı bağlayıcı kimlik doğrulaması; CLI öncesi ön kontrol token denetimi
YönlendirmeFigma referanslarını ayrıştırın, niyete göre varlık/token/bileşen/hareket/storyboard/shader aşamalarına yönlendirin
Varlıklar (Aşama 1 — CLI)Düğümleri REST üzerinden render edin, SVG'yi temizleyin, .media/images/ altında dondurun, hız sınırlarını aşmamak için düğümleri dosya başına toplu işleyin
Token'lar (Aşama 2 — CLI)Değişkenleri kompozisyon marka girdileri olarak içe aktarın, Enterprise dışı planlarda yayınlanmış stillere düşürün, bağlama dizini oluşturun
Bileşenler (Aşama 3 — CLI)Düğüm ağacını tam geometriyle HTML'ye dönüştürün, vektörler otomatik rasterize edilir, içe aktarıldığında dolguları var() aracılığıyla token'lara bağlayın
Hareket (Aşama 4 — konektör destekli)Hareket bağlamını özyinelemeli olarak alın, MotionDocs'a normalize edin, GSAP betikleri üretin, 15dB hareket-PSNR eşiğine göre doğrulayın
Shader'lar (Aşama 5 — çoğunlukla manuel)Konektör render'ı shader'ları düzleştirir; bunun yerine kullanıcıdan PNG veya MP4 olarak yerel Figma dışa aktarması isteyin
Storyboard'lar (sahne kareleri içeren bir BÖLÜM → animasyon)Kareler slayt değil anahtar kare'dir; bitişik kareleri öğe zincirlerine ayırın, önce ada sonra geometriye göre eşleştirin, yönetmen notları geçişleri belirtir
DeterminizmTüm Figma URL'lerini yerel olarak dondurun, hiçbir zaman -1 tekrarı üretmeyin, zaman çizelgeleri duraklatılmış ve sonlu olsun, tüm G/Ç içe aktarma zamanında gerçekleşsin

Skill'in Kendi Açıklaması

"Figma içeriğini bir HyperFrames kompozisyonuna aktarın — render edilmiş varlıklar, marka token'ları, bileşenler, hikaye tahtası bölümleri → yeniden oluşturulmuş hareket (kareler slayt olarak değil durum olarak okunur) (REST/CLI), mevcut olduğunda bağlayıcı destekli hareket ve bir bağlayıcıdan veya yerel dışa aktarmadan shader'lar. Kullanıcı bir figma.com bağlantısı yapıştırdığında veya bir Figma tasarımı, çerçevesi, logosu, markası veya animasyonunu video/kompozisyona getirmesini istediğinde kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 17.829 karakterdir. Dosyanın tamamını GitHub'da okuyun.

Figma

Gerçek bir Hareket ve Video Görevinde figma çalıştırın.

OpenDesign'ı indirin, figma'yı SKILL.md bağlantısından içe aktarın, yukarıdaki komutu yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill figma

figma Skill'i Claude Code ve Codex'te Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

figma Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

figma Skill'in Claude Code ve Codex'e Verdiği Kurallar

İlk CLI Çağrısından Önce Token'ı Kontrol Edin

Asset'ler için Her Zaman --description Geçin

Dosya Başına Bir İstekte Node'ları Toplu İşleyin

Bileşenlerden Önce Token'ları İçe Aktarın

Composition İçinde Asla Figma URL'leri Bırakmayın

Asla Repeat: -1 Üretmeyin

Kullanıcı İçin Her Adımı Anlatın