This document aims to help domestic users of Framer overcome the difficulties caused by the lack of Korean resources by translating the content of the official blog into Korean and adding practical information. We hope this will be of some help to those using Framer.

Setting Up a Design Library

When starting a project, organizing your design system in advance greatly aids future scalability.

• Text Styles: Define text styles like H1, H2, body text, and captions. Adding responsive breakpoints allows sizes to adjust automatically for various devices.

• Color Styles: Unifying colors for interface elements like backgrounds, text, and buttons ensures a neat site. It's beneficial to set contrast values for both light and dark modes.

• Components: Create components for reusable elements like buttons, navigation menus, and card UIs. By leveraging Variant and Variable features, you can adjust the same component to suit different situations.

Creating Flexible Designs

A website isn't a one-time creation but is continuously revised and expanded. Therefore, setting up a flexible structure initially helps accommodate these changes easily.

• Modular Layout: Designing a page in sections like hero banner, feature introduction, and customer testimonials makes it easier to rearrange or add new blocks later.

• Using Stacks: Try the stack feature that auto-aligns content as it increases or decreases, saving you from manually adjusting pixels each time.

• Prioritizing Base Breakpoints: Designing based on the most important resolution (e.g., desktop) is efficient, then add detailed sections for smaller screens.

Note: If you have designs already done in Figma or HTML files, using Figma to Framer or HTML to Framer plugins can save a lot of time.

Managing Content with CMS

As a site grows, managing regularly updated content like blog posts, product information, and news efficiently becomes essential. This is where a CMS is crucial.

• Content Collections: Creating CMS collections for regularly updated content like blog posts, product lists, FAQs, and news articles allows for convenient management.

• Components and Layout: CMS collections can be flexibly adjusted by combining them with desired design elements, rather than just listing text.

Prioritizing Testing and Performance

Rather than deploying completed designs immediately, it's advisable to first go through a safe testing phase. For more optimization tips, please refer to the site's Optimization Guide.

• Testing in Staging Environments: Testing in a staging environment before uploading to the live site and going through an approval process reduces the likelihood of issues.

• Optimization Tips: Minimize unnecessary animations, and embed YouTube or Vimeo videos instead of uploading video files directly for faster loading speeds. Also, avoid inserting unnecessary scripts in Custom Code.

This article is a translated and adapted version of the content from Framer's official blog, ‘Setting up your Framer site for scale’.