hyperframes-figma

طراحی‌های Figma را به ویدیوهای متحرک و قابل‌ویرایش HyperFrames تبدیل کنید.

این skill دارایی‌ها، توکن‌های برند، کامپوننت‌ها و storyboardهای Figma را در زمان build به HyperFrames وارد می‌کند و آن‌ها را به ویدیوی HTML قابل‌رندر تبدیل می‌سازد. قاب‌های Figma به‌عنوان stateهای متحرک خوانده می‌شوند، نه اسلایدهای ثابت.

برای ساخت موشن دقیق، timelineهای GSAP، easingها و داده‌های connector را تولید و با export مرجع Figma مقایسه می‌کند. فایل‌های واردشده به‌صورت محلی cache می‌شوند تا رندرها پایدار باشند و هر بار فقط تغییرات جدید دوباره import شوند.

چه چیزی می‌گیرید

• واردکردن layer، لوگو و تصویر از Figma به‌صورت SVG یا PNG با اندازه مناسب
• استخراج brand tokenها و اتصال آن‌ها به composition variableهای قابل‌تغییر
• تبدیل frameهای Figma به componentهای HTML با هندسه دقیق و قابل‌ویرایش
• بازسازی storyboard به‌صورت حرکت پیوسته بین stateها، نه پخش اسلایدی
• تولید و بررسی timelineهای GSAP و مدیریت fallback برای shader یا trackهای ناسازگار

برای چه کاری خوب است

• تیم‌هایی که می‌خواهند طراحی آماده Figma را به ویدیوی محصول یا معرفی برند تبدیل کنند
• پروژه‌هایی که به brand tokenهای قابل‌تغییر و کامپوننت‌های قابل‌ویرایش در HyperFrames نیاز دارند
• Storyboardهایی که قاب‌های متوالی آن‌ها stateهای مختلف یک UI یا صحنه متحرک را نشان می‌دهند

برای چه کاری نیست

• پروژه‌هایی که منبع طراحی آن‌ها Figma نیست یا به خروجی ویدیویی HyperFrames نیاز ندارند
• فایل‌هایی که دسترسی خواندن آن‌ها برای حساب Figma فراهم نیست
• Shaderها و motion trackهایی که فقط با export بومی Figma قابل‌دسترسی هستند، بدون ارائه فایل PNG یا MP4 مرجع

دربارهٔ این اسکیل

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin.

Figma → HyperFrames

Every import happens at build time and freezes a local file with its source recorded under .media/, so renders never call Figma and re-running a command re-imports only what changed. Assets, tokens and components go over REST with a token; motion and shader data need a Figma connector, or a native export from the person.

Access

FIGMA_TOKEN in the shell or the project .env. Check it exists before the first command; if not, tell the person how to make one and stop: figma.com → Settings → Security → Personal access tokens, read-only File content and File metadata, plus Library content for tokens on non-Enterprise plans. They set it themselves; never ask them to paste it into the chat.

Commands

• A layer, logo or image: npx hyperframes figma asset '<url or fileKey:nodeId>' [more refs] --format svg|png --scale 2 --description "<what it is>" [--entity "<brand mark>"]. SVG for vectors and logos, PNG at 2x for raster. Several nodes of one file in one call render in a single request; --entity lets /media-use find a brand mark later.
• Brand colours and type: npx hyperframes figma tokens <fileKey>. Run it before component and paste the printed entries into data-composition-variables. Without Enterprise it falls back to published styles. A connector can supply variables there instead: cache its raw response in .media/figma-cache/ and write the bindings to .media/figma-bindings.jsonl ({kind:"binding", figmaId, sourceFileKey, compositionVariableId:"figma:<name>", version}).
• A frame as editable HTML at exact geometry: npx hyperframes figma component '<url or fileKey:nodeId>', packaged under compositions/components/<name>/. A fill bound to an imported token comes out as var(--slug, #literal), so one variable re-brands every import; an unknown token stays a literal marked data-figma-unresolved: import that library's tokens and re-import. Ask once which file a library is; never match by hex.
• Check hero components against Figma's pixels (figma asset <same node> --format png). Text drift is the usual cause; report drift you can't fix instead of hand-tweaking the import.

Motion (connector)

Usage beacon: these phases have no CLI touchpoint, so run npx hyperframes events --skill=figma-motion when you begin and npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error when done. Same for shaders (figma-shaders) and storyboards (figma-storyboard).

1. Fetch motion context for the parent frame in one recursive request; cache the raw JSON in .media/figma-cache/.
2. Normalise with motionContextToDocs(raw, { selectorFor, repeat }) from @hyperframes/core/figma, never by transcribing keyframes. It reads the motion.dev snippets (the CSS snippets stretch durations), drops loop-wrap tail keyframes and keeps bezier eases. selectorFor returns the ids from the component import.
3. motionToGsap(doc) → emitTimelineScript(spec), injected after the GSAP and CustomEase tags: paused, finite, a literal window.__timelines key. Named eases outside the mapped set fall back to linear; say so.
4. Verify against Figma's own export: node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y. It compares motion between samples, so static drift cancels out, and fails under 15 dB (faithful ≈ 20+, diverging ≈ 5). Measure --crop from the render's card edges. A fail means fix the translation, not the threshold.
5. A track that won't translate: export it, freeze the MP4 and place it as <video class="clip">.

Shaders

Figma's export path flattens shaders to their base colour, and shader source is only reachable for library-published styles. Ask the person for a native export of that frame (PNG or MP4) and place it as an asset or clip.

Storyboards: frames are KEYFRAMES, not slides

Two frames holding the same element describe that element's state through time: animate the element between the states. Playing the frames back to back as stills is the failure mode.

1. Scenes are every frame-sized node in the section, named frames and loose full-frame rectangles alike: filter by size, not type or name. Order by absoluteBoundingBox.x.
2. Match children across neighbouring frames by name first, then by similar size and position. Tween geometry between states; crossfade two exports in place when the pixels changed. Export one asset per element, not one still per frame. Unmatched children enter or exit at their scene's beat.
3. Text nodes below the strip are motion notes for the scene above them, not on-screen copy. A note about motion inside a scene ("lines reveal one after another") means import that frame as a component and animate it.
4. Export in batches of about 4 scene frames per call: past about 12 ids /v1/images times out.
5. Frames that are one product UI in successive states: rebuild the UI as live DOM: code what changes state, freeze what doesn't, and treat each frame change as an interaction to perform (the cursor moves, clicks, the screen responds), not a tween to apply.
6. Stills are the fallback, only for frames with no shared elements.

Never leave a Figma URL in the composition.

دانلود ZIP