HyperFrames Figma Import Skill for Codex Video Projects
Import a Figma asset or frame as local footage or editable source. Preserve design colors and place the imported component on a HyperFrames timeline.
中文Setup for Codex
Use Codex with Node.js 22+, FFmpeg, HyperFrames, a Figma file you may read, and a token with the necessary Figma scopes. Animated or shader-specific imports can require a Figma connector or native export.
- Run `npx hyperframes skills update` for the Codex core skills, then select figma separately in the upstream skills picker. The pinned folder includes references and scripts if installing manually.
- Set your Figma access token in the local environment without putting it in the prompt. Open the video project in Codex and select $figma.
Example task
In a scratch video project, create a Figma design you control with a colored 240-by-120 rectangle and the label “Sample card.” Use $figma to import the frame as an editable component. Mount it for three seconds and compare a snapshot with the original.Expected result
The imported component has a project-local source and matches the card dimensions and label at the sampled time.
Upstream documentation
Original SKILL.md on GitHub · Apache-2.0 license · Source reviewed
Frequently asked question
What credentials are needed to bring a Figma frame into HyperFrames from Codex?
The documented REST import uses a Figma token with read access to the source. A connector or native export may be required for motion or shaders.