Design & Layout

Design sites faster.

Design sites faster.

Design sites faster.

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

Start for free today

Insert

Layout

Text
CMS

Actions

Punkt

·

Invite

Publish

Pages

Layers

Assets

Home

Desktop

Primary

Hero

Envelope

Hero

Header

Paragraph

Body

Scroll Section

Testimonial

Content

Logo Strip

The 5 P’s

Footer

Tablet

1199 — 810

Phone

809 — 0

Desktop
Breakpoint

Mobile

Breakpoint

Breakpoint

Position

0

X

0

Y

Width

1200

Fixed

Height

Auto

Fit

Layout

Type

Stack

Grid

Direction

Distribute

Center

Align

Wrap

Yes

No

Gap

0

Padding

20

Effects

Scroll

Animation

Styles

Fill

#000000

Overflow

Visible

Radius

0

Frame

F

Image

Rows

⇧R

Columns

⇧C

Grid

⇧G

Stunning designs. Dynamic layouts.

Stunning designs. Dynamic layouts.

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.

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 important tools for making designs that look good on any screen. Stacks are like layers stacked up, and Grids are a structured layout. They help designers create websites that work well on different devices.

These tools are crucial for responsive design, making sure your design looks good on big and small screens. Stacks and Grids keep things organized and make your website user-friendly.

In web design, using Stacks and Grids is a must. They not only help your design look neat but also ensure it performs well on search engines. So, when people search for attractive and adaptable web layouts, your site stands out.

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

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

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

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

Insert Pages and Sections

Make your website building process a breeze with our ready-to-use Framer sections. These sections are like pre-designed building blocks that you can easily add to your project, saving you time and effort.

Insertable Pages & Sections are very simple and versatile. They come in common layouts for landing pages, portfolios, and teaser pages, providing a solid starting point for your Framer site. They have a clean and basic style, ready for you to customize and make your own.

Instead of starting from scratch, you can insert a section that fits your needs. It’s a practical way to achieve a professional-looking site without the complexity. And, of course, you have the freedom to adjust things to match your unique style.

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

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

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

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

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.

Built-in Fonts

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