Gradient

Design & Layout

Design sites faster.

Design your site on a familiar free-form canvas. Visually set up your breakpoints to make it responsive.

Insert

Layout

Frame

Text
CMS
Memoji
Memoji

Invite

Publish

Pages

Layers

Assets

Desktop

Primary · 1200+

Hero

Nav

Hero

Header

Paragraph

Button

Asset

Icon

Video

Image

Clients

Testimonials

Pricing

Footer

Tablet

1199 — 810

Phone

809 — 0

Desktop
Breakpoint
Webiste

Mobile

Breakpoint
Website

Frame

F

Image

Rows

⇧R

Columns

⇧C

Grid

⇧G

Stunning designs. Dynamic layouts.

Powerful layouts, simple design tools.

Use powerful yet familiar tools to create your ultimate website design. Import your designs from Figma, add flexible Grids & Stacks, use absolute positioning, and work on your breakpoints side-by-side to adapt them to any screen size.

Use powerful yet familiar tools to create your ultimate website design. Import your designs from Figma, add flexible Grids & Stacks, use absolute positioning, and work on your breakpoints side-by-side to adapt them to any screen size.

Stack and Grid

Use fixed grids or fluid stacks to organize and position elements with ease.

3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render

Freeform canvas

Use the freeform canvas to express your creative ideas like you are used to from other design tools.

Figma Copy Paste

Copy and paste your web designs from Figma to Framer and hit publish.

https://your-website.framer.website/

User avatar in a browser
Photography portfolio website

Breakpoints

Visually design layouts that adapt to any size.

Desktop
Breakpoint
Website

Insert Pages and Sections

Insert pre-made pages, headers, footers, navigation bars, common layouts, and more.

Pinning

Use layout pinning to design smarter layouts that scale.

Restaurant photo

Position

30

T

600

B

600

L

30

R
Position

Styling

Style everything using familiar, easy-to-use property controls.

3D render
3D render

Positioning

Use positioning options to fix navigation bars, sidebars, badges, and backgrounds.

Portrait of a man
Portrait of a woman

Harper Carpenter

About

Light and Dark Mode

Establish a Color Style with Light and Dark Themes, then let your website adapt to your computer’s native Appearance settings.

Built-in Fonts

Find your favorite fonts from Google Fonts and Fontshare.

Stack and Grid

Stacks and Grids are used to organize multiple objects neatly. A Stack is a group of layers stacked vertically or horizontally, and a Grid is a structured pattern of layers. These tools allow for easy responsive design adaptable to different screen sizes.

Framer UI
3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render
3D abstract render
gradient
gradient
gradient

Freeform canvas

The freeform canvas in Framer allows you to express your creative ideas freely, as it does not impose any constraints on pre-set layouts or box models, thus giving you the flexibility to design in the way you want.

The freeform canvas is similar to other design tools you may be familiar with, such as Adobe XD, Sketch, and Figma; it provides flexibility and freedom to create unique designs tailored to your needs and creativity.

Website

Website

Website
gradient
gradient
gradient

Figma Copy Paste

The ability to copy and paste web designs from Figma to Framer is a convenient feature for designers who already have a website design in Figma and don’t want to start from scratch. With this feature, you can copy your designs from Figma, seamlessly transfer them to Framer, and publish your design as an actual website without requiring manual rebuilding or using code. This helps to save time and effort and allows you to focus on the creative aspects of your work.

https://your-website.framer.website/

User avatar in a browser
Photography portfolio website
gradient
gradient
gradient

Breakpoints

Breakpoints in Framer allow you to create responsive designs that adapt to different screen sizes, ensuring an optimal experience on any device. Breakpoints are visible on the canvas side by side; this allows you to compare and adapt faster than any visual site builder.

Desktop
·

1200

Breakpoint
Website

Tablet

·

1199

Breakpoint
Website

Mobile

·

809

Breakpoint
Website
gradient
gradient
gradient

Insert Pages and Sections

Easily insert single-page templates into your project, with various templates for standard layouts such as landing pages, portfolios, and teaser pages. Insertable Pages & Sections are minimally styled and designed to form a solid foundation for your Framer site—while still fully customizable to fit your creative vision.

Insert

Layout

Frame
Text
CMS

Site

·

framer.com/blog

Publish
Search

Basics

Pages

Sections

Navigation

CMS

Collection Lists

Content Fields

Elements

Audio
Forms
Icons

Interactive

Patterns

Social
Utility
Video
100%

Layout
Stack
Styles
gradient
gradient
gradient

Pinning

Use layout pinning to design more imaginative layouts that scale. With Framer’s pinning feature, you can secure your elements and sections in place, ensuring they adapt to your layout when the viewport size changes. You can even put absolute elements inside stacks and grids, ignoring the flow of things and pinning it to a specific position.

Restaurant

Position

30

T

600

B

600

L

30

R
Position
gradient
gradient
gradient

Styling

Style every layer on your site using simple property controls like fills, borders, filters, and even realistically rendered shadows. Use Text Styles and shared colors to style your pages throughout your entire project consistently.

3D render

Find Your Space

Framer UI
gradient
gradient
gradient

Positioning

Use positioning options to fix navigation bars, sidebars, badges, and backgrounds. Pin layers to the Viewport regardless of your page set-up, or use absolute positioning within Stacks to break out of its flow.

Portrait of a man
Portrait of a woman

Harper Carpenter

About

Framer UI
gradient
gradient
gradient

Light and Dark Mode

Add a Color Style, define a Light and Dark Theme, then use the Styles throughout your project. Color Styles with Themes even work within interactions and animations—from Effects to Components.

gradient
gradient
gradient

Built-in Fonts

Framer lets you choose from its built-in web fonts or pick from Google Fonts and Fontshare to style your designs.

gradient
gradient
gradient

Effects

Effortlessly create stunning animations with just a few clicks.

Navigation

Move between different pages or sections of the site.

CMS

Manage content for a blog posts, job listings, or marketing pages.

Site Management

Manage website settings like passwords and custom domains.

SEO & Performance

Manage content for a blog posts, job listings, or marketing pages.