How to Organize Your Framer Components Using Folders

Keeping your components organized is key to maintaining a clean and efficient Framer project. Folders help you group related components together, making it easier to navigate and scale your design system.

How to Create Component Folders in Framer

You can create folders directly from the component name. To do this, include a forward slash in the name using this format:

FolderName/ComponentName

For example:

• Button/Primary

• Button/Secondary

• Button/Tertiary

Framer will automatically place these components inside a folder named Button.

How to Custom Order Your Components Within Folders

By default, components inside a folder are sorted alphabetically. If you want to control the order, you can add numbers to the beginning of your component names.

For example:

• Navigation/1. Navbar

• Navigation/2. Footer

• Navigation/3. Aside

This makes it easier to keep related components in the order that makes the most sense for your workflow.

Subfolders in Framer

At the moment, Framer does not support subfolders. If you name a component like Section/FAQ/Item, it will only create one folder called Section.

Final Tip

Using folders for your components will make your project cleaner, faster to navigate, and easier to maintain as it grows. It is a small habit that makes a big difference when working on larger design systems or client projects.