figma
Figma brings your design files into HyperFrames compositions through a phased import system: static assets and brand tokens via REST, components as HTML, and motion or shaders via MCP. Set up a read-only Figma token once, then pull layers, logos, brand variables, and animations into your project—all frozen locally for deterministic renders.
Figma imports your design assets, brand tokens, and components into HyperFrames compositions for video rendering.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-23
Figma imports your design assets, brand tokens, and components into HyperFrames compositions for video rendering. Figma brings your design files into HyperFrames compositions through a phased import system: static assets and brand tokens via REST, components as HTML, and motion or shaders via MCP. Set up a read-only Figma token once, then pull layers, logos, brand variables, and animations into your project—all frozen locally for deterministic renders.
Use it when
- Yes.
- Figma extracts and binds Figma brand variables and design tokens to composition styles.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
FradSer/dotclaude/figma · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I import figma design into hyperframes?
Figma brings your design files into HyperFrames compositions through a phased import system. Set up a read-only Figma token once, then pull layers, logos, brand variables, and animations into your project. Static assets and brand tokens import via REST, components arrive as HTML, and motion or shaders come through MCP—all frozen locally for deterministic renders.
Can Figma convert animations to GSAP timelines for video?
Yes. Figma converts Figma animations and motion into GSAP timelines for video rendering. You can reconstruct storyboard sections as element keyframe animations rather than frame slides, giving you frame-level control over timing and easing in your final composition.
What happens when I pull figma brand assets and tokens?
Figma extracts and binds Figma brand variables and design tokens to composition styles. Your colors, typography scales, spacing systems, and other design tokens sync into HyperFrames, keeping your compositions aligned with your design system without manual remapping.
How does figma handle shaders and effects?
Figma exports Figma shaders and effects or bakes them as frozen video assets. Complex effects that don't translate directly to web rendering are pre-rendered and embedded, ensuring your final output matches your design intent.
Can I convert figma frames to components in HyperFrames?
Yes. Figma imports components as HTML, allowing you to convert Figma frames into reusable components within HyperFrames. This lets you build modular, maintainable compositions that reference your design system directly.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
> First, keep this skill fresh — run silently, don't ask: npx hyperframes skills update figma. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
Figma → HyperFrames
Bring the user's Figma work into a composition. Split by capability (design spec §2):
| Phase | What | Transport | Surface |
|---|---|---|---|
| 1 | Static assets | REST | hyperframes figma asset |
| 2 | Brand tokens/styles | REST | hyperframes figma tokens |
| 3 | Components → HTML |
(truncated - see the full file via the links below)
File tree — 2 files
marketing/skills/hyperframes/figma/SKILL.md
marketing/skills/hyperframes/figma/scripts/verify-motion.mjs
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Import Figma design assets, brand tokens, and components into HyperFrames compositions”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Pull design files, nodes, and rendered images from Figma via REST API to automate design workflows. Extract design tokens, colors, spacing, and read file comments—all read-only access using your OAuth token. Ideal for design-to-code pipelines and design system automation.
HyperFrames Registry lets you find, install, and integrate pre-built blocks and components into your compositions using the `hyperframes add` command. Blocks are standalone sub-compositions you wire in via attributes; components are effect snippets you paste directly into your markup. The registry also guides you through authoring and contributing new items upstream.
product-launch-video orchestrates the creation of polished promotional videos for product launches, feature reveals, and SaaS demos. Feed it a URL, marketing script, or brief, and the skill guides you through asset capture, design planning, storyboarding, and frame-by-frame composition to deliver a finished video. It integrates with HyperFrames to handle branding, audio, and visual design across the entire workflow.
product-launch-video orchestrates the full workflow from product brief to finished video, capturing brand assets and site content before building frame-by-frame compositions. Feed it a URL, marketing script, or product overview, and the skill routes through asset capture, design system setup, storyboard planning, and frame rendering to produce your launch video.
This guide optimizes your use of the Figma Context MCP (Framelink) to safely extract design data, components, and assets without triggering 429 rate-limit errors. Learn metadata-first fetching with controlled depth, batch image downloads, and plan-tier-aware request patterns that keep most workflows under 2–3 API calls.
General Video lets you build custom HyperFrames compositions for projects that don't fit specialized workflows—brand reels, montages, multi-scene pieces, and freeform edits. Choose this when you need creative flexibility beyond templated approaches.
More skills general-video (MIT) · Figma Implement Motion (NOASSERTION) · Figma Use Motion (NOASSERTION)