Bring a design into a project

Start from a Figma file or a design-tool draft. Keep the look, rebuild only what has to move.

Already have a design — Figma, a design-tool draft, a brand kit? One rule decides how each piece comes across:

Pictures stay pictures. Anything that has to move or change gets rebuilt as real HTML — the editable code the video is made of.

What to keep as a picture

Keep the export when the piece just sits there and looks right:

• Logos, icons, illustrations, textured artwork.
• A screenshot, when a still proves the point.
• A Figma component, when exact pixels matter more than editing.
• Storyboard frames, as references for the look.

What to rebuild in HTML

Rebuild it when something inside changes while the video plays:

• Parts of an illustration animate separately.
• A screen shows a real interaction, or is re-cropped to another size.
• Text, color, layout, or on/off states change.
• Storyboard frames whose point is the motion between them — build that movement, don’t cut between finished frames.

Brand colors and fonts: import once, use everywhere.

Don’t animate a stack of finished screenshots just because a design tool made them. Screenshots are proof. HTML is what changes.

Both panels get the same clicks. Only the rebuilt side reacts, because a picture of a form cannot take input. That is the whole rule this page is about.

Start from Figma

Give the agent the link and the outcome:

Use this Figma section as the source for a 20-second product intro:
https://www.figma.com/design/FILE/Project?node-id=10-20

Keep the brand type and colors. Rebuild the states that must move. Treat the
frames as key moments, not slides.

The /figma skill imports artwork, reads brand values, rebuilds components as editable HTML, and translates motion where it can. It all lands in the project, so rendering never depends on Figma. Tokens, commands and errors: Figma reference.

Start from Claude Design or Open Design

These settle layout, palette, type, and scene direction first.

1. Give the tool the HyperFrames instruction file and your brand material.
2. Ask for a working project, not loose mockups.
3. Save it to disk, then open that folder with a coding agent.
4. Let the agent check timing, motion, media, captions, and rendering.

Claude Design instruction · Open Design handoff

Is the handoff any good?

A good one has a clear direction, real assets or honestly labeled placeholders, editable source for whatever may change, local media and fonts, and a project that opens. Check that yourself:

npx hyperframes check
npx hyperframes preview

Then watch it move in Studio — stills cannot show timing.

Related topics

• Use the Figma integration
• Work on the project in Studio
• Choose where to create