Everything it does, at a glance.

01 · Layout

Real auto layout, not absolute boxes.

Flex, grid and block become auto layout. Drag the handle: it resizes like the page would.

• Hug · Fill · Fixed
• Gap & padding
• Alignment

• Gap, padding and alignment come straight from the CSS.
• Hug, fill and fixed sizing, so frames behave when resized.
• Empty wrappers are merged, so the layer tree stays shallow.

02 · Components

Repeated elements become components.

Same-structure cards and buttons turn into one component with instances.

• Main + instances
• Header & footer
• Overrides kept

• Main components go to a separate Components page.
• Each instance keeps its own text and images.
• Header, footer and top nav can be components too.

03 · Naming

Layers named like a designer would.

Hero, Pricing, Button/Primary. Not div.wrapper-2.

• Hero · FAQ · Pricing
• Button/Primary
• Card/Product

• Buttons, cards and inputs get set names like Card/Product.
• Sections are named after their heading: Section / Why us.
• Text layers are named after their content.

04 · Styles

Color and text styles with clean names.

Create new styles, or match the ones already in your file.

• Brand/Primary
• Heading/H1
• Match existing

• Colors sort into Brand, Text, Surface, Status.
• CSS variables keep their names: --primary → Brand/Primary.
• Match existing finds the closest style already in your file.

05 · Variables

Or save everything as variables.

Colors and typography come in as variable collections, already bound to your layers.

• Imported colors
• Imported typography
• Scoped

• Colors are bound to fills as color variables.
• Font size, line height and family become variables like heading/h1/size.
• Variables you already have are reused, not duplicated.

06 · Viewports

Every screen size, in one go.

Import desktop, tablet and mobile side by side on the canvas.

• 4K → Mobile
• Many files at once

• Pick any of 4K, desktop, laptop, tablet and mobile.
• Drop several .html files at once, one row per file.
• Large pages are built in chunks, so Figma stays responsive.

07 · Extension

Copy pages exactly as you see them.

Logged-in dashboards, React and Vue apps and web fonts, captured as rendered.

• Behind a login
• SPAs
• Web fonts

• Scrolls the whole page first, so lazy content loads.
• Scroll animations are captured as they appear.
• The page is left exactly as it was.

08 · Options

You choose what comes in.

Every step above can be switched off, and your last settings are remembered.

• All optional
• Remembered
• Reset anytime

• Skip ::before / ::after content or image overlays.
• Keep the original class names if you prefer them.
• Reset to defaults brings everything back.

09 · CSS

What CSS comes through.

Beyond layout, these are read and turned into their Figma equivalents.