Preparing a Figma frame

1. The frame

• A top-level frame on the page (or right inside a Section), visible, at least 240 × 200 px. Up to 6 frames at a time — each 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. Send it as a separate frame, not next to the desktop one.
• Height: a whole landing page is fine. Keep a frame under about 12 000 px for crisp text; split anything longer in two.
• Background: give the frame a solid fill — that colour is used behind the page. Without one it is white.
• Hidden layers are ignored. Your design is never changed: the plugin works on a temporary copy and removes it.

2. Sections

• Each direct child of the frame is a section — Header, Hero, Features, Pricing, Footer. One top-level layer per section, from top to bottom.
• Name the sections. The AI director reads the names to decide where to stop and what to show.
• A page in one big wrapper still works — it is cut where the content leaves a clear gap — but real sections work better.
• Top-level layers that overlap each other are merged into one section.
• Up to 3000 layers and 9 levels of nesting are read. Anything deeper still shows, but moves together with its parent.

3. What moves as one piece

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 and animates its children.

• Give every card a background. A card made of loose layers in an unfilled group falls apart into pieces.
• A filled block nearly as wide as the page is treated as a section background; its contents animate on top of it.
• Keep text as text. It is animated line by line, and its words are what the AI reads. Outlined text becomes a picture.
• Big numbers (short text starting with a digit, 30 px or larger) count up. Image fills get a reveal. Layers up to 64 × 64 px are icons.
• Background blur and blend modes are rendered without what is behind the layer, so they can look different. If it matters, flatten that part.

4. Buttons: what the cursor clicks

The cursor only presses things built to be pressed.

• A frame or a component instance — not bare text — with a text layer inside: the label, up to 34 characters.
• 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 one of: its own fill or stroke; a name with button, btn or cta; or a prototype interaction.
• The first click goes to the main call to action — name it clearly (Button / Get started) and use a real verb in the label.

5. Hover and other states — use components

Casecut never invents a hover; 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:

• A prototype interaction on the variant — on the default one: While hovering → Change to → the hover variant. The most reliable way. On click → Change to works for things that open or switch.
• A variant named for hover — a property value containing Hover (State=Hover), or a property called Hover going from false to true.
• A variant named for another state — Active, Pressed, Open, Expanded, Selected, On, Focus. These open or switch on a click and stay.
• One property apart. The default and the state variant must differ in exactly one property (State=Default → State=Hover).
• Same size. If the hover variant is bigger, put the instance in a parent that keeps its own size. The instance: at least 32 × 16 px, no wider than 720 px on a 1440 px frame.
• Tabs, accordions, toggles: several instances of one component next to each other in one parent, exactly one of them active. A click really moves the active state.
• In the video a hover shows while the cursor is on the element and goes when it leaves — on a hover and just before a click. Up to 20 states per frame, 5 per component.
• 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

• A row of at least 2 slides of the same size (each 120 × 80 px or more), evenly spaced.
• The row runs past the edge of a frame with Clip content on, or past the edge of the page — the hidden slides are still in the file.
• Arrows: small layers (16–110 px) near the row, outside the slides, named with arrow, next, prev or chevron — or with a prototype interaction. Up to 3 sliders, 10 slides each.

7. Names

• Layer and component names are read by the AI. Hero image, Card / Pricing, Button / Book a call say what things are; Frame 4127 says nothing.
• Component names matter most: an instance of 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.

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
• Hover, active and open states are variants of one component, one property apart, same size
• Tabs and accordions: instances of one component in one parent, exactly one active
• Sliders: same-size slides running out of a clipped frame, with named arrows
• Layers and components have real names