Building Your First Framer Site

Creating Your First Project

Framer makes it easy to build professional websites without code. Start by creating a new project and choosing a blank canvas.

Using Stacks and Frames

Stacks automatically arrange your content in rows or columns. Frames give you precise control over positioning and sizing.

Adding Content

Bring in text, images, and components, then refine spacing and alignment to keep the layout crisp.

Publishing Your Site

Preview your design across breakpoints and publish when everything looks locked in.

export function LayoutEngine(props) {
  // Define responsive behavior
  const stackBehavior = useTransform(viewport, {
    desktop: 'row',
    mobile: 'column'
  });
  // Return configured component
  return <Stack direction={stackBehavior} />
}