{"enrichment":{"faq":[{"a":"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\u2014all frozen locally for deterministic renders.","q":"How do I import figma design into hyperframes?"},{"a":"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.","q":"Can Figma convert animations to GSAP timelines for video?"},{"a":"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.","q":"What happens when I pull figma brand assets and tokens?"},{"a":"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.","q":"How does figma handle shaders and effects?"},{"a":"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.","q":"Can I convert figma frames to components in HyperFrames?"}],"shadow_tags":["design-system-sync","motion-reconstruction","asset-freezing","brand-variable-binding","keyframe-mapping","component-registry","storyboard-sequencing","figma-oauth","timeline-assembly","shader-export"],"summary_rewrite":"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\u2014all frozen locally for deterministic renders."},"files":[{"bytes":18023,"path":"marketing/skills/hyperframes/figma/SKILL.md","sha256":"c985935aa8d64acdb3ab8dbbc7920fd6b60117e37bc4f20942cb5552d934d25b","url":"https://skillfed.io/files/FradSer/dotclaude/figma/f063bb69/SKILL.md"}],"id":"FradSer/dotclaude/figma","links":{"html":"https://skillfed.io/FradSer/dotclaude/figma","md":"https://skillfed.io/FradSer/dotclaude/figma.md","repo":"https://github.com/FradSer/dotclaude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":47,"language":"JavaScript","last_updated":"2026-07-23","license":"MIT","name":"figma","publisher":"FradSer","stars":576},"relations":{"similar":[{"id":"connorads/dotfiles/figma"},{"id":"heygen-com/hyperframes/figma"},{"id":"FradSer/dotclaude/product-launch-video"},{"id":"figma/mcp-server-guide/video-interaction-mapper"},{"id":"heygen-com/hyperframes/product-launch-video"},{"id":"vladmdgolam/agent-skills/figma-context-mcp"},{"id":"heygen-com/hyperframes/general-video"},{"id":"FradSer/dotclaude/general-video"},{"id":"connorads/dotfiles/general-video"},{"id":"figma/mcp-server-guide/figma-implement-motion"}]},"slug":{"owner":"FradSer","repo":"dotclaude","skill":"figma"},"version":"f063bb69"}