Search
Setting up your Framer site for scale
Building a Framer website that grows alongside your business requires a strategic approach. Follow these tips to set yourself up for success:
1. Set up your design library:
Text styles: define text styles for headings (H1, H2, etc.), paragraphs, and other text elements. Add breakpoints to your styles to ensure they automatically scale on different devices.
Color styles: establish consistent color styles to use within your layouts, for backgrounds, text, and interactive elements. You can also set up dark and light values for theming.
Reusable components: build reusable components such as buttons, navigation menus, product cards etc. Uses variants and variables for maximum flexibility.
![](https://framerusercontent.com/images/LQTJQXVIHS0WGXyOvq9f2FVejJw.png)
2. Create flexible designs:
Modular layouts: break down pages into sections (e.g., hero, features, testimonials, etc.) to help easily rearrange and scale your content.
Stacks: use stacks to create layouts that automatically adjust to their content without requiring manual work.
Primary breakpoint first: focus on setting up a scalable design on the primary breakpoint, then add breakpoints and fine-tune your designs on smaller displays.
Bonus Tip: If you have a design in Figma or an existing website, use the Figma to Framer or HTML to Framer plugins to speed up the process!
![](https://framerusercontent.com/images/8Q6r6td5e0AEZeuD4ShVi3zPuU.png)
3. Leverage the CMS for your content needs:
Content collections: create CMS collections for blog posts, product listings, news articles, FAQ or any other regularly updated content to simplify adding, editing, and organizing information.
Components and layouts: leverage components and layouts to customize the visual appearance of your CMS collections and create flexible designs that adapt to your collection content.
![](https://framerusercontent.com/images/JpWKn4j80hBqurwwoMwmikvEKU.png)
4. Prioritize testing & performance
Staging environment: test and review new updates before deploying to your live site to avoid launching unapproved content or functionality that could break your page.
Optimization: avoid overusing animations, prefer Youtube or Vimeo over uploading videos directly to Framer and check for any unnecessary third-party scripts if using custom code. Find detailed optimization tips here.