Why Framer words trip up Webflow and Figma users
Framer borrows Figma's design-tool habits and publishes real websites, so its terms sit between the two worlds. Some map neatly: a Framer Stack behaves much like Figma auto layout. Others look the same but work differently: "override" means a stored variant difference in one place and a piece of React code in another, and a Framer breakpoint width is a starting point rather than a ceiling.
Definitions come from Framer Academy lessons, Framer help articles, Framer developer docs and Framer's pricing page, with Figma and Webflow comparisons from their own help centers, all read on 30 October 2026. The mapping columns are our interpretation of those docs, not an official equivalence table.
Layout terms
| Framer term | What it means in Framer | Nearest Webflow concept | Nearest Figma concept |
|---|---|---|---|
| Frame | A container whose children use absolute positioning by default; for overlaps and precise placement. | An absolutely positioned div | A plain frame without auto layout |
| Stack | A Frame with Stack layout: children use relative positioning in a shared row or column, with gap, padding, alignment and distribution. | A flex container | Auto layout, vertical or horizontal |
| Grid | A layout for rows and columns that share tracks; gaps and minimum column widths are set on the parent. | A grid container | Auto layout grid flow |
| Breakpoint | An alternate layout for a viewport range; the width shown is the minimum width where it becomes active. | Webflow tablet applies at 991px and below, so the logic runs the other way | No direct equivalent; separate frames per device |
| Primary breakpoint | The layout new breakpoints inherit from; each breakpoint overrides only what it needs. | The desktop base breakpoint | None |
Components, variants and overrides
Framer uses "override" in two unrelated ways. Inside a component, a non-primary variant stores only its differences from the primary variant as overrides, highlighted in purple and resettable. Code overrides are something else entirely: small React and TypeScript functions you attach to a layer to change its behavior. Framer notes that code overrides are not active on the canvas, only in preview and on the published site, and that they must pass through existing props and refs or they can break Framer's built-in behavior.
| Framer term | What it means in Framer | Nearest Webflow concept | Nearest Figma concept |
|---|---|---|---|
| Component | A reusable unit that can hold alternate layouts, styles and interactive states. | Component (main component) | Component |
| Instance | A placed copy with its own variant control and its own text or image values. | Component instance | Instance |
| Variant | An alternate appearance of the same component. | Component variants | Variant inside a component set |
| Primary variant | The variant whose structure and values the others inherit. | The main component's default state | The default variant |
| Hover and press states | States branched from a variant that Framer animates in Preview. | A hover interaction | Variants with hover or pressed values |
| Component variables | Values passed into instances so text and images move between variants. | Component props | Component properties |
| Code override | A React function attached to a layer; active only in preview and on the live site. | Custom code | No equivalent |
| Code component | A React 18 component written in Framer's code editor that renders on canvas, in preview and on the live site. | Code components | No equivalent |
Effects and CMS terms
| Framer term | What it means in Framer | Nearest Webflow concept |
|---|---|---|
| Appear effect | Animates a layer from a starting state to its design when it first becomes visible; presets include Fade, Scale, Flip and Slide In. | A scroll-into-view interaction |
| Appear triggers | On Appear, On Scroll (by scroll direction), Layer in View and Section in View. | Interaction triggers |
| Transition | Timing for an effect; Spring is the default, with easing curves available. | Easing in an interaction timeline |
| CMS collection | A group of related content, such as articles or team members. | Collection |
| Field | Defines the text, images, dates, links and other values every item holds. | Field |
| Item | One record in a collection. | Collection item |
| Slug | The item's URL segment. | Slug |
| Collection list | Shows several items in an index, grid or featured section. | Collection list |
| Detail page | One reusable layout that shows each item in full. | Collection page |
| Staging and versions | Every publish creates a version; with staging on, your custom domain can stay on a chosen version while the base domain shows the latest. | webflow.io staging subdomain |
Which features are plan-gated
Framer's pricing page on 30 October 2026 listed Basic at $10 a month and Pro at $30 a month, with a yearly billing toggle on the page; check which billing period the figure reflects before budgeting. Staging also needs a connected custom domain, according to Framer's staging article.
| Feature | Free | Basic | Pro |
|---|---|---|---|
| Custom domain | No | Yes | Yes |
| Pages | 1,000 per pricing FAQ | 30 | 150 (add +100 for $20, up to 700) |
| CMS collections | 10 per pricing FAQ | 2 | 10 (add +10 for $40, up to 40) |
| CMS items | Not listed | 1,000 | 2,500 (add +10,000 for $20, up to 40,000) |
| Bandwidth | 1 GB | 50 GB | 100 GB |
| Staging environment | Not listed | Not in plan summary | Listed in plan summary |
| Site redirects | Not listed | Not in plan summary | Listed in plan summary |
| Analytics history | Not listed | 30 days | 90 days |
| A/B testing | Not listed | Not listed | Add-on |
| Extra editors | Up to 3 editors per FAQ | $20/mo each; content editors $10 | Same; up to 10 seats |
Switching checklist
- Coming from Figma: copy layers with the Figma to HTML with Framer plugin, then check fonts, images, spacing and responsive behavior, as Framer's lesson advises.
- Coming from Webflow: rebuild classes as Framer text and color styles, components or variables, and import CMS content by CSV one collection at a time.
- Rebuild breakpoints with Framer's minimum-width logic in mind; do not copy Webflow's max-width numbers blindly.
- Use variants and effects before reaching for code overrides, which only show in preview and on the live site.
- Count collections early: Basic allows 2, so posts plus categories already uses the whole allowance. The Free plan's FAQ figures (10 collections, 1,000 pages) are for trying Framer; it cannot use a custom domain.
- If you need redirects or staging, price Pro from the start.
Questions before you decide
What is a Stack in Framer?
A Stack is a Frame with Stack layout applied. Its children use relative positioning in a shared row or column, and the Stack controls gap, padding, alignment and distribution. Framer suggests Stacks for content that should flow, and plain Frames for precise placement or overlap.
What is the difference between an override and a code override in Framer?
In component variants, overrides are the property differences a non-primary variant stores, shown in purple. A code override is a React function attached to a layer that changes its behavior and is only active in preview and on the published site.
How do Framer breakpoints differ from Webflow breakpoints?
Framer says the width shown for a breakpoint is the minimum viewport width where it becomes active. Webflow's smaller breakpoints apply at and below a width, such as tablet at 991px and below, with styles cascading down from desktop.
Sources & verification
Product details and prices can change. Check the linked provider before buying.
- Framer Academy: Frames vs Stacks Accessed 30 Oct 2026
- Framer Academy: Stacks vs grids Accessed 30 Oct 2026
- Framer Academy: Breakpoints Accessed 30 Oct 2026
- Framer Academy: Component variants Accessed 30 Oct 2026
- Framer Developers: Overrides introduction Accessed 30 Oct 2026
- Framer Developers: Code components introduction Accessed 30 Oct 2026
- Framer Academy: Appear effect Accessed 30 Oct 2026
- Framer Academy: Getting started with the Framer CMS Accessed 30 Oct 2026
- Framer Help: Staging and versions Accessed 30 Oct 2026
- Framer Academy: Importing from Figma and the web Accessed 30 Oct 2026
- Framer: Webflow to Framer step-by-step guide Accessed 30 Oct 2026
- Framer pricing Accessed 30 Oct 2026
- Figma Help: Guide to auto layout Accessed 30 Oct 2026
- Figma Help: Create and use variants Accessed 30 Oct 2026
- Webflow Help: Breakpoints overview Accessed 30 Oct 2026
Sources link directly to providers. Product buttons may use separately labeled affiliate links. Read our disclosure.