Freelance Designer 101: Design Process & Figma File Organization

Hey guys! 👋 

In my previous posts, I covered the first contact with your client, pricing strategies, and project proposal.

In this edition, I’ll show you how I approach the design process and organize Figma files for efficiency and collaboration.

Ready? Let's dive in.

Freelance Design Process

The design process for freelance projects is a little different from what you might be used to as a product or UX designer. There’s usually less data, fewer insights, and minimal user analysis to work with, so you have to stay flexible and think on your feet. That said, I still try to gather as many insights as I can from whatever sources are available.

Here’s what my typical freelance design process looks like:

1. Research & Moodboard: Laying the groundwork with competitor research and visual inspiration.

2. Visual Directions: Proposing initial ideas to align with the client’s vision.

3. Project Milestones & Feedback Rounds: Breaking the project into smaller, reviewable phases.

4. Design System (or Style Guide): Creating a system to keep everything consistent.

5. Preparing Assets & Instructions for Handoff: Wrapping up with clean files and clear guidance.

🔍 Research

As you can see, I combine research with moodboarding. The reason is simple: for many projects — especially for new brands just starting out — there’s little to no data or insights to rely on.

For redesign projects, I usually have something to work with, like user behavior insights, feedback, Google Analytics data, or even session recordings. But when a company is just beginning its digital journey, the input is often very limited.

So, how do I make sure I have at least some direction? The answer lies in combining competitor research, public data, and client input. 

Competitor Research

Looking at competitors is a great way to get a sense of the industry. It helps you identify common patterns, trends, and visual languages that are working for others. Sure, their decisions might not always be backed by solid data or proper research, but it still paints a helpful picture of what’s happening in their space.

Public Data

Publicly available data is another goldmine for gathering insights. It’s not always perfect, but it can give you clues about what customers in a particular industry struggle with or expect. Before diving into competitor research, I’ll often look up industry trends, market research, or reports on sites like statista.com. A quick Google search for “[industry] mobile usage” can also be incredibly useful.

Client Input

Don’t underestimate your client’s knowledge. They know their industry, work with their customers directly, and can provide valuable insights into their audience. Their input often helps shape the visual language and approach for the project.

✨ Moodboard

I like to create two moodboards for each project:

1. Client-Inspired Moodboard

This moodboard is based on the client’s input. It might include examples they’ve shared, websites they admire, or any references and ideas they’ve provided. 

2. Research-Based Moodboard

The second moodboard comes from my own research and findings, including insights from competitor research, public data, and industry trends.

By combining these two moodboards, I can visually explain how the client’s input and my research come together to shape the project. It’s an effective way to show how everything aligns with their goals and the proposed visual direction. This collaborative process not only builds trust but also ensures we’re on the same page before moving forward.

👁️ Visual Directions

Visual directions are one of the most crucial steps in the design process. This is where you set the tone for the entire project, aligning with the client’s expectations and establishing the vibe and feel that will guide everything moving forward.

I avoid focusing on a single direction and prefer to explore a few options instead. Sharing multiple visual directions with clients has two major benefits:

1. It helps clients better understand their preferences — what resonates with them and what doesn’t.

2. It highlights gaps or areas where each direction could be improved.

When presenting visual directions, I always include my thought process, along with notes and comments to explain the rationale behind each option. For larger projects, I prefer to book a call to walk the client through the concepts, giving me the chance to explain the ideas in detail and answer any questions.

🏁 Project Milestones

I prefer an iterative process that incorporates client feedback at every step, which is why I always include project milestones — even for smaller projects. Milestones help us stay aligned by breaking the project into manageable steps and closing each one before moving to the next.

For example, in a website redesign project, the homepage might serve as the first milestone (after selecting the visual direction). Once the homepage is finalized through a few rounds of feedback, I align with the client one last time before starting on the next milestone.

This approach not only reduces the risk of major changes when the project is nearly finished but also gives clients a stronger sense of progress and control throughout the process.

💬 Asking for Feedback

Asking for feedback is a skill in itself. You can’t just send clients a bunch of links, prototypes, or moodboards with a casual “Hey, your thoughts?” and expect meaningful input.

You need to guide your clients through the feedback process. This means:

• Explaining where their input is needed: Be clear about what parts of the project you want them to focus on.

• Clarifying the type of feedback you’re looking for: Whether it’s about overall direction, specific elements, or functionality, help them understand what you need from them.

• Providing context: Share your thinking behind the design decisions so they can see the reasoning and goals behind your work.

• Setting expectations for the stage of the process: Let them know whether this is an early draft, a final design, or somewhere in between, so they know how to frame their feedback.

Teaching clients how to give constructive feedback not only streamlines the process but also avoids unnecessary revisions and misunderstandings.

I’m planning to dive deeper into this topic in a future post, covering how to ask for feedback, manage project communication, and handle negative feedback effectively.

🎨 Design System (or Style Guide)

It wouldn’t be me if I skipped creating a design system (DS). Even for smaller projects, I make it a habit to save styles (like colors and typography) and create simple components.

Why? It keeps my files organized and makes it easy to revisit projects later — because let’s be honest, I’m not going to remember all the styles or final design system details months down the line. 😅 Plus, once it becomes a habit, it significantly speeds up your workflow.

For bigger projects or any branding work, I also prepare a style guide for my clients. This is a simpler and more client-friendly version of the design system and usually includes:

• Colors: Primary and secondary palettes with usage notes.

• Typography: Font styles, sizes, and usage rules.

• Logo Usage: Guidelines for how (and how not) to use the logo.

• Other Visuals & Icons: Notes on preferred styles, proportions, or restrictions.

Having a design system or style guide isn’t just about keeping things neat; it’s a tool for consistency and efficiency — for both you and your clients.

📂 Final Assets 

When the project wraps up, I make sure to prepare all the final assets for my clients — or their developers. To keep things simple, I use Google Drive to organize everything into folders and share a single, easy-to-access link.

For a website redesign, I typically include:

• Images: All images currently used on the website.

• Brand Elements: Logos in various formats and other brand assets.

• Animations: Any animations created for the project.

• Thumbnails: Custom thumbnails, banners, templates.

• Additional Visuals: Any other graphics or images the client might need.

I also often prepare a Figma file with Loom instructions explaining how to update and edit banners, templates, or visuals I’ve created. This ensures that clients (or their teams) can make small updates on their own without feeling stuck.

🧩 Developer Handoff

When I work with a developer, I take extra care to organize my Figma file differently. I include more detailed notes and user flows to ensure it’s crystal clear what the entire user journey looks like.

In some cases, I’ll also create Loom instructions to explain how to optimize images for performance and approach more complex or challenging design elements.

Ideally, I’ll schedule a handoff call with the developer to review everything together. This gives them a chance to ask questions and ensures they have all the screens, assets, and notes they need to move forward confidently.

🏆 Project Wrap-up

Once all the assets and instructions are prepared, I like to schedule a final chat to ensure there are no questions and everything is clear.

For Webflow design projects, I also include a separate training session to walk clients through making basic updates and changes on their own — so they don’t feel stuck or have to rely on me for every tweak.

This final call is also the perfect time to gather feedback on the overall project and end things on a positive note.

Afterward, I wrap up with a few final steps:

• Preparing the remaining invoice (for larger projects).

• Requesting a testimonial. I’ve started using Senja to collect and manage testimonials, and it’s made the process much easier and more organized.

Figma File Organization

My Figma file organization mirrors my design process. For most projects, I start with research and moodboarding, move on to creating visual directions, incorporate feedback after each milestone (e.g., hero section, homepage, or sign-up flow), and finally collect all deliverables in one place.

I use a few templates depending on the project’s type and size. Some files are less polished (and never shown to clients), while others are structured with developer or client handoff in mind.

For a typical mid-sized design project — like a website or mobile app — I create the following pages:

• Cover: A quick reference page for myself, where I note the client’s name, project status, and key details. 

• Research: This page includes competitor research, any available data or analytics, and the initial moodboard to set the foundation for the project.

• Visual Exploration: The starting point for design. Here, I develop 2–3 visual directions based on the client’s input, my research & moodboards to explore the look and feel of the project.

• Feedback Rounds: A dedicated space to document all client notes, comments, and iterations from the feedback process.

• Final Designs: The home for all completed work. This includes final assets, pages/screens, design system components, guidelines, and any handoff materials for developers or clients.

👬 Two Figma files

Now, do you think this is the same file I share with my clients? Hell, no!

This file, while it contains everything I’ll eventually share with my clients, is strictly for me. It’s the project’s behind-the-scenes: full of history, drafts, and experiments. It’s chaotic, unorganized, and very much a work-in-progress.

When I need client feedback directly in Figma, or if I want to share a prototype or visuals through a Figma link, I prepare a separate clean file. This version is distraction-free and client-friendly — because let’s face it, no one wants to see your design mess. 😅

By the end of each project, I usually have two Figma files:

1. My file: A messy workspace with all the notes, drafts, and experiments.

2. Client file: Clean, organized, and polished, ready to be shared as part of the final deliverables.

But here’s the catch: to maintain this level of organization, you need to pay for Figma team. And be careful — if you invite clients or anyone else to your team, you’ll end up paying for their seats too.

To avoid this, I provide .fig files along with Loom instructions for my clients instead of inviting them to collaborate or comment directly in my Figma team. This way, they get exactly what they need without adding unnecessary costs to my workflow.

Closing Thoughts

And that’s a behind-the-scenes look at my design process and Figma file organization. From research and moodboarding to creating clean, client-ready files, every step is about working smarter, not harder.

The key takeaway? A well-organized workflow doesn’t just save you time — it builds trust with your clients, ensures smoother communication, and helps you deliver better results. Whether it’s managing chaotic drafts, exploring clear visual directions, or preparing thoughtful handoffs, staying organized is your biggest ally as a freelance designer.

That’s all for today! If you found the newsletter interesting, don’t forget to share it with your friends 😉. And if you have any cool links to share - drop them my way. 📮 

See you next time!
Kristina

P.S. To ensure you don't miss any future editions, consider adding my email to your contacts, primary inbox or whitelisting it. I promise, no spam - just a good cup of Designer's Coffee each month! ☕