Structuring Your Figma Files

1. The Hierarchy of a Figma File

Every Figma project is organized into a clear hierarchy. Understanding this structure is the first step to mastering your workflow. The main levels are:

• Files: A single file typically represents a whole project (e.g., "Client X - Website Redesign" or "Bespoke Gifting - Social Media Templates").
• Pages: Within a file, pages act like tabs in a browser or chapters in a book. They help you separate different parts of your project, such as different design stages (e.g., exploration, final designs) or different features.
• Frames: These are your canvases or "artboards" that live on a page. Each frame represents a specific design, like a single mobile screen, an Instagram post, or a web banner.
• Layers: These are the individual elements (shapes, text, images) that make up your design within a frame.

This video from Flux Academy provides an excellent overview of this structure.

A well-structured file makes it easy for you, your clients, or future collaborators (like developers) to navigate your work.

2. Structuring Your Project with Pages

For the small- to medium-sized projects you'll start with as a freelancer (like digital invitations or social media assets), a simple page structure is all you need. A great starting point is to separate your work by its status.

Let's use the official Figma best practices guide to establish a clean, simple structure you can use for all your freelance projects.

Practical Exercise: Set Up Your First Organized File

Now, let's apply this structure to the digital invitation project you started in the last lesson.

1. Open the Figma file where you created the invitation header.
2. If you haven't already, save the file with a clear name. A good convention is Client Name - Project Name. For this practice, you can name it Practice - Digital Invitation.
3. In the Layers Panel on the left, you'll see a section for Pages. Click the + icon to add new pages.
4. Create the following pages. You can even use emojis to make them more scannable, a common pro-tip:
   • 🖼️ Cover (We'll learn how to make a cover in a later lesson)
   • ✅ Designs
   • ♻️ Archive
5. Click on the original page (likely named "Page 1"), right-click, and select "Delete page". Then, create a new frame on your ✅ Designs page.
6. Recreate the simple invitation header from the last lesson inside this new frame. This time, as you create it, pay close attention to the next topic: naming.

3. The Power of Consistent Naming

Just as clear headings and labels are essential in financial reports, descriptive names for your layers and frames are crucial in design. Unnamed layers like Rectangle 54 and Frame 12 create confusion and slow you down.

Why is naming so important?

• Efficiency: You can find what you're looking for instantly.
• Collaboration: When you hand off a design to a developer, clearly named layers (e.g., Button - Primary, Header, Product Image) tell them exactly what each element is.
• Scalability: As your designs become more complex, a logical naming system prevents chaos.

This short clip explains the core principle of naming layers for collaboration.

A Pro-Tip for Organization: Slash Naming

As you advance, you'll create different versions or states of an element (e.g., a button in its default, hover, and pressed state). Figma has a powerful "slash naming" convention to organize these.

For example, naming your button components:

• button/primary/default
• button/primary/hover
• button/secondary/default

This automatically groups them in Figma's menus, making your assets incredibly easy to manage. This next video introduces this powerful concept. You don't need to master it today, but being aware of it from the start will set you up for success.

Practical Exercise: Name Your Layers

Go back to the invitation header you just re-created in your new, organized file.

1. In the Layers Panel on the left, double-click on each layer to rename it.
2. Give each layer a descriptive name. For example:
   • The frame containing the design: Invitation - Instagram Story
   • The background shape: Header Background
   • The masked image: Floral Image
   • The text with the couple's names: Headline - Couple Names
   • The smaller text: Sub-headline
3. Bonus: Group related layers. Select the two text layers by holding Shift and clicking them. Right-click and choose "Group selection" (or press Cmd+G / Ctrl+G). Name the group Header Text.

Conclusion

You've now learned the fundamental principles of file organization in Figma. By establishing these habits early, you are building a professional workflow that will save you countless hours and make you a more effective and collaborative designer.

Key Takeaways:

• Hierarchy: Figma files are structured into Pages, which contain Frames, which are made up of Layers.
• Pages for Separation: Use pages to separate your work by status or phase (e.g., Cover, Designs, Archive).
• Frames for Canvases: Use frames for each distinct design asset (e.g., a post, a story, a screen).
• Naming is Non-Negotiable: Always give your frames and layers clear, descriptive names. This is critical for efficiency and developer handoff.

Preview of the Next Lesson:

Now that you can create elements and organize them neatly, our next step is to arrange them on the canvas with precision. In the next lesson, you'll learn to use alignment, distribution, and spacing tools to arrange elements precisely. We will move from the macro-organization of pages and frames to the micro-organization of elements within a single design, ensuring your layouts are always balanced and pixel-perfect.