Design & Layout
Design sites faster.
Design your site on a familiar free-form canvas. Visually set up your breakpoints to make it responsive.
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.
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.
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.
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.
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.
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.
Position
30
600
600
30
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.
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.
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.