# Preparing a Figma frame for Casecut

Casecut (https://casecut.app) turns a Figma frame into a motion case video. Its Figma plugin reads the frame you pick, sends every animated layer as its own image, and an AI director writes the storyboard: what appears first, where the cursor clicks, what it hovers.

Casecut works with any frame. This guide is about getting the best video out of it — and it is written so you can hand it to an AI assistant that has access to your Figma file (see "Prompt for an AI assistant" at the end).

Nothing here is a hard requirement unless it says **must**.

## 1. The frame

- **Must** be a top-level frame on the page (or directly inside a Section), visible, at least 240 × 200 px. A component or an instance on the page works too.
- You can send up to 6 frames at a time. Each one becomes its own video.
- **Desktop:** 1440 px wide is ideal; 1280–1920 is fine.
- **Mobile:** a frame up to 520 px wide (390 is ideal) is shown as a phone — a phone-shaped screen in the middle of the picture. Send the mobile version as a separate frame, not side by side with the desktop one.
- **Height:** a whole landing page is fine. Very long pages are rendered at a lower resolution, so keep a frame under about 12 000 px for crisp text; split anything longer into two frames.
- **Background:** give the frame a solid fill. That colour is used behind the page. Without one, white is used.
- Hidden layers are ignored. The design itself is never changed: the plugin works on a temporary copy and removes it.

## 2. Structure: sections

- Each **direct child of the frame is read as a section** (Header, Hero, Features, Pricing, Footer…). Keep one top-level layer per section, in order from top to bottom.
- Name the sections. The names are read by the AI director: `Hero`, `Pricing`, `Testimonials`, `Footer` help it decide where to stop and what to show.
- If the whole page sits in one big wrapper, Casecut cuts it where the content leaves a clear vertical gap. It works, but real sections work better.
- Don't put unrelated things in top-level layers that overlap each other: overlapping top-level layers are merged into one section.
- The navigation is whatever sits in the top ~150 px of a desktop frame.
- Up to 3000 layers and 9 levels of nesting are read. Anything nested deeper still shows, but moves together with its parent.

## 3. Layers: what animates as one piece

Casecut decides which layers move on their own. The rule it follows:

- **A frame with its own fill, stroke or shadow is an object** (a card, a button) and moves as one piece.
- **A frame without any of them is only layout**: Casecut looks inside it and animates its children.

So:

- Give every card a background (fill, stroke or shadow). A card built as loose layers in an unfilled group falls apart into separate pieces.
- Don't wrap half the page in one filled frame unless it really is one object. A full-width filled block (90 % of the width or more) is treated as a section background, and its contents animate on top of it.
- **Keep text as text.** Text layers are animated line by line, and their words are what the AI director reads to write the title and the storyboard. Outlined or flattened text becomes a picture.
- Big numbers (a short text starting with a digit, 30 px or larger) count up.
- A layer with an image fill is a picture and gets a reveal.
- Small layers up to 64 × 64 px are icons. Lines up to 3 px thick are drawn in.
- Rows of the same size next to each other (a table, a list, a grid of cards) appear one after another.
- Layers that use background blur or a blend mode are rendered on their own, without what is behind them, so that effect can look different in the video. If it matters, flatten that part.
- Video and GIF fills are sent as a still picture.

## 4. Buttons: what the cursor clicks

The cursor only presses things that are built to be pressed. A layer is a button when all of this is true:

- it is a frame or a component instance (not bare text) that has a text layer inside it — the label, up to 34 characters;
- it is 24–110 px tall and up to 520 px wide (on a 1440 px frame; on a phone frame a full-width button is fine);
- and at least one of: it has its own fill or stroke; its name contains `button`, `btn` or `cta`; or it has a prototype interaction.

An icon button with no label works when it has its own shape and is up to 80 × 80 px.

The first click of the video goes to the main call to action, so name it clearly (`Button / Get started`) and use a real verb in the label ("Get started", "Book a call", "Try it free").

## 5. Hover and other states — use components

This is how the designer's own hover ends up in the video. Casecut never invents a hover state; it shows the one you drew.

Build the element as a **component with variants** and place **instances** of it in the frame. Then any one of these is enough:

1. **A prototype interaction on the variant** — on the default variant: *While hovering → Change to → the hover variant*. This is the most reliable way. *On click → Change to* works the same way for things that open or switch.
2. **A variant named for hover** — a property value that contains `Hover` (`State=Hover`), or a property called `Hover` that goes from `false` to `true`.
3. **A variant named for another state** — `Active`, `Pressed`, `Open`, `Opened`, `Expanded`, `Selected`, `On`, `Focus`, `True`. These are treated as "opens / switches" rather than hover.

Rules that make it work:

- The default variant and the state variant **must differ in exactly one property** (`State=Default` → `State=Hover`, everything else the same).
- The state should keep the size and position of the instance. If the hover variant is bigger, put the instance in a parent that keeps its own size (a fixed-size auto-layout cell): the parent is what gets re-rendered.
- The instance must be at least 32 × 16 px and no wider than 720 px (on a 1440 px frame).
- Up to 20 states per frame are used, and up to 5 per component (a menu of ten identical links gives five).

What happens in the video: a **hover** state shows while the cursor is on the element and goes when the cursor leaves — on a hover, and just before a click. An **opens / switches** state changes on the click and stays.

**Tabs, accordions, toggles:** place several instances of the same component next to each other in one parent, with exactly one of them in the other variant (the active tab, the open item). When the cursor clicks another one, the active state really moves to it.

A detached instance, or a hover drawn as a separate hidden layer, is not picked up — it has to be a variant of the same component.

## 6. Sliders and carousels

A slider really slides when it is built like this:

- a row of at least 2 slides of the same size (each at least 120 × 80 px), evenly spaced;
- the row runs past the edge of a frame with **Clip content** turned on (or past the edge of the page itself) — the hidden slides are still in the file;
- the arrows are small layers (16–110 px) near the row, outside the slides, named with `arrow`, `next`, `prev`, `chevron`, `left` or `right` — or with a prototype interaction on them.

Up to 3 sliders per frame, 10 slides each.

## 7. Names and text

- Layer and component names are read by the AI director. `Hero image`, `Logo`, `Card / Pricing`, `Button / Book a call` tell it what things are; `Frame 4127` tells it nothing.
- Component names matter most: an instance of a component called `Button`, `Tab`, `Card` or `Input` is understood as exactly that.
- Put the real site address somewhere in the design (the footer is enough). It is shown in the browser bar of the video.
- The title of the video is written in the language of the design.

## 8. Checklist

- [ ] One top-level frame per page, desktop 1440 px (or mobile 390 px as a separate frame), with a solid fill
- [ ] Direct children of the frame are the sections, named, in order
- [ ] Every card has its own fill, stroke or shadow
- [ ] Text is live text, not outlines
- [ ] Buttons are frames or instances with a label inside and a fill or stroke; the main one has a clear verb
- [ ] Hover, active and open states are variants of the same component, one property apart, same size — ideally with a "While hovering → Change to" interaction
- [ ] Tabs and accordions are instances of one component in one parent, exactly one of them active
- [ ] Sliders: same-size slides running out of a clipped frame, with named arrows
- [ ] Layers and components have real names
- [ ] No frame taller than about 12 000 px

## Prompt for an AI assistant

Copy this together with the guide above:

> You have access to my Figma file. I am going to send the frame I name below to Casecut, a tool that turns a Figma frame into a motion video. The guide above describes how Casecut reads a frame.
>
> 1. Work only in a **duplicate** of my frame. Do not change the original and do not change how anything looks.
> 2. Go through the checklist in section 8 and report, point by point, what already matches and what does not — with the names of the layers involved.
> 3. Fix what can be fixed without changing the look: restructure top-level layers into named sections, give layers and components real names, wrap loose card layers into a frame with the card's own background, turn buttons into frames with a fill and a label.
> 4. For hover, active and open states that I drew as separate layers or separate components: combine them into one component with variants (one property apart, same size) and add the "While hovering → Change to" interaction. If I have not drawn a hover state, do not invent one — list those elements and ask me.
> 5. Finish with a short list of anything you could not fix and why.
>
> Frame: [paste the link to your frame here]