---
title: "Bring a design into a project"
sidebarTitle: "Bring in a design"
description: "Start from a Figma file or a design-tool draft. Keep the look, rebuild only what has to move."
---

import { DocsVideo } from "/snippets/docs-video.jsx";

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.

<DocsVideo
  title="A design frame beside the same design rebuilt as working HTML"
  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/figma-to-html-demo-v1.mp4"
  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/figma-to-html-demo-v1.jpg"
/>

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:

```text
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](/guides/figma).

## 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](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/design-tools-hyperframes.md) · [Open Design handoff](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/open-design-hyperframes.md)

## 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:

```bash
npx hyperframes check
npx hyperframes preview
```

Then watch it move in [Studio](/studio) — stills cannot show timing.

## Related topics

- [Use the Figma integration](/guides/figma)
- [Work on the project in Studio](/studio)
- [Choose where to create](/guides/choose-creation-path)
