Wireframe
A low-fidelity visual representation of a page layout focusing on structure and content hierarchy without detailed styling. Wireframes help validate concepts quickly before investing in visual design. In Framer, you can start with simple shapes and progressively add detail as designs evolve.
Related AI terms: First Draft and Prompt-to-Code.
Frame
Framer
The fundamental container element in Framer that holds content and defines boundaries for layout, sizing, and visual properties. Frames are the building blocks of every Framer design, from tiny icons to full page layouts. Unlike groups, frames have their own properties and can contain responsive layouts and effects.
Prototype
Design
An interactive simulation of a product used to test concepts, gather feedback, and demonstrate functionality before full development. Prototypes range from low-fidelity wireframes to high-fidelity interactive mockups. In Framer, prototypes become production sites—there's no separate prototype stage to recreate.
First Draft
AI
First Draft is an AI workflow for quickly generating editable interface concepts. Teams use it to move quickly from idea to wireframe and then refine output with Prompt-to-Code.