How to Organize your Framer Components using Folders

Learn How to use Folders to Organize Components in your Framer Project.

Clément Lionne

4 min read

·

Oct 29, 2024

Table of Contents

In this tutorial, you'll learn how to use folders to organize components in your Framer project.

How to Create Component Folders in Framer

Create a component in Framer

To create a folder, you need to include the forward slash "/" in the component name using this format: FolderName/ComponentName.

For example:

  • "Button/Primary"

  • "Button/Secondary"

  • "Button/Tertiary"

How to Custom Order Your Components Within Folders

Custom Components Folder Order

Components in a folder are ordered alphabetically by default. If you want a specific order for your components, you can add numbers at the beginning of your component names.

For example:

  • "Navigation/1. Navbar"

  • "Navigation/2. Footer"

  • "Navigation/3. Aside"

How to Use Subfolders with Components

Unfortunately, subfolders are not currently supported. Naming your component "Section/FAQ/Item" will not create the expected folder structure.

And voilà! You can now effectively organize your Framer components into folders, making your project more structured and easier to navigate.

Don't forget to share this post!

Related Resources
Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.

Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.

Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.

Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.