Figma for Non-Designers: A Guide to Seamless Collaboration
Randall Carter
Figma for Non-Designers: A Guide to Seamless Collaboration
Understanding the Figma Interface: A Non-Designer's Crash Course
The Canvas, Layers, and Pages
Using View-Only and Comment Mode
Interacting with Prototypes
The Typical Figma Design Workflow
Phase 1: Wireframing and Low-Fidelity Design
Phase 2: High-Fidelity Mockups and Prototyping
Phase 3: Handoff to Developers
Your Role in the Figma Workflow: How to Participate Effectively
Using the Commenting Tool Effectively
Reviewing Prototypes and User Flows
Understanding Version History
Best Practices for Asynchronous Collaboration in Figma
Leaving Clear and Actionable Feedback
Using Statuses in Comments (e.g., 'Resolved')
Respecting the Designer's Workspace
Conclusion
References
Figma for Non-Designers: A Guide to Seamless Collaboration
Figma is the canvas where your project comes to life, but you don't need to be a designer to play a crucial role. Understanding how to navigate Figma and participate in the design workflow is key to effective collaboration. This guide will demystify the platform for non-designers, helping you communicate better with your designer and contribute to a successful outcome.
Whether you're just starting with onboarding your designer or looking to give feedback that gets results, understanding Figma basics will transform how you work together. And if you're still searching for the right creative partner, you can hire a freelance Figma designer who's already familiar with collaborative workflows.
Understanding the Figma Interface: A Non-Designer's Crash Course
At first glance, Figma can seem complex. However, non-designers only need to be familiar with a few key areas to navigate files confidently and collaborate effectively.
Think of Figma like Google Docs for design. Just as you don't need to be a professional writer to leave comments on a document, you don't need design skills to contribute meaningfully in Figma. The interface might look intimidating with all its tools and panels, but you'll only use about 10% of what's available – and that's perfectly fine.
The Canvas, Layers, and Pages
The main workspace in Figma is called the canvas – it's the large gray area where all the designs live. You can think of it as an infinite whiteboard where your designer arranges screens, components, and ideas. To move around, simply hold the spacebar and drag, or use your trackpad to pan around. Zooming works just like other apps: pinch to zoom on a trackpad or use Ctrl/Cmd + scroll wheel.
On the left side, you'll see the layers panel. This shows how elements are organized, similar to a folder structure on your computer. Each screen or component is nested here, making it easy to find specific elements. Don't worry about understanding every layer – just know that clicking on items here will highlight them on the canvas.
Pages work like tabs in a spreadsheet. Your designer might organize different features, versions, or stages of the project across multiple pages. You'll find these at the top of the layers panel. Common page names include "Wireframes," "Final Designs," or "Archive." Simply click between them to explore different parts of the project.
Using View-Only and Comment Mode
As a non-designer, you'll primarily use comment mode to provide feedback. This is your superpower in Figma. Press the 'C' key or click the comment bubble icon in the toolbar to activate it. Your cursor becomes a comment pin that you can place anywhere on the design.
When you click on a specific element – maybe a button that seems too small or text that's hard to read – you can leave a comment right there. This contextual feedback is incredibly valuable because your designer sees exactly what you're referring to. No more confusing email threads trying to describe "that blue button on the third screen."
View-only mode is your default state. You can look around, zoom in and out, and explore the designs without accidentally moving anything. This protection means you can click freely without worrying about messing up your designer's work. It's like having a museum tour where you can get close to the art but can't accidentally knock anything over.
Interacting with Prototypes
Designers often create interactive prototypes to demonstrate user flows. These are clickable versions of the design that simulate how the final product will work. To access prototype mode, look for the play button in the top right corner of the screen.
In prototype mode, certain elements become clickable. You might tap a button and see it transition to the next screen, just like in a real app. This gives you a realistic feel for the user experience. Pay attention to how natural the flow feels. Can you complete tasks easily? Do you get lost anywhere?
While clicking through prototypes, jot down notes about your experience. Did something surprise you? Was a particular interaction delightful or confusing? These observations help your designer refine the user experience before any code is written.
The Typical Figma Design Workflow
Design is a process of iteration. Understanding the key phases of the design workflow will help you know what to expect at each stage and what kind of feedback is most helpful.
Each phase builds on the previous one, gradually adding detail and refinement. Knowing where you are in this journey helps you provide the right feedback at the right time. Commenting on colors during wireframing, for instance, is like choosing paint colors before the house frame is built.
Phase 1: Wireframing and Low-Fidelity Design
In this early stage, the focus is on structure, layout, and user flow, not colors or fonts. Wireframes look intentionally basic – often just gray boxes and simple text. This isn't laziness; it's strategic. By removing visual distractions, everyone can focus on the fundamental question: does this solve the user's problem?
During wireframing, your feedback should concentrate on functionality. Ask yourself: Can users complete their main tasks? Is important information easy to find? Does the navigation make sense? This is the time to suggest adding a forgotten feature or reorganizing confusing sections.
Don't worry if wireframes look "ugly." They're supposed to. Think of them as the blueprint for a house – you're checking if the rooms are in the right places, not picking out curtains. Save aesthetic feedback for later phases when it's actually relevant.
Phase 2: High-Fidelity Mockups and Prototyping
This is where the visual design comes to life. Colors appear, real images replace placeholders, and typography gets refined. Your brand personality starts shining through. Now those gray boxes transform into beautiful buttons, and placeholder text becomes carefully crafted copy.
Feedback at this stage can be more detailed. Does the design match your brand guidelines? Are the colors creating the right mood? Is the text readable? You might notice that a photo doesn't quite capture your company culture, or that the font feels too formal for your audience.
High-fidelity prototypes let you experience the design almost like the final product. Click through different screens, try completing tasks, and pay attention to micro-interactions like button hover states or loading animations. These details might seem small, but they significantly impact how professional and polished your product feels.
Phase 3: Handoff to Developers
Once designs are approved, designers prepare them for the development team. This phase is mostly technical, but understanding it helps you appreciate the full process. Figma's 'Dev Mode' allows developers to inspect every element, extracting exact colors, fonts, spacing, and even code snippets.
Your designer will organize and label everything meticulously. Components get named consistently, colors are documented in a style guide, and spacing follows a systematic approach. This attention to detail ensures developers can build exactly what was designed.
While you might not be directly involved in handoff, knowing this phase exists helps set realistic timelines. Just because a design looks "done" doesn't mean it's ready for development. The handoff preparation can take days, especially for complex projects.
Your Role in the Figma Workflow: How to Participate Effectively
Your input is invaluable, but how you provide it matters. Following these best practices ensures your feedback is clear, actionable, and contributes positively to the project.
Remember, you bring unique perspective as someone who deeply understands the business goals and user needs. Your designer has expertise in visual communication and user experience, but they need your insights to create something truly effective. This partnership works best when both sides communicate clearly and respectfully.
Using the Commenting Tool Effectively
Place your comments directly on the relevant design element. Click on the specific button, text, or image you're discussing. This precision eliminates confusion and saves time. Instead of writing "the header needs work," click on the header and explain what specifically isn't working.
Always tag your designer using @theirname in comments. This sends them a notification, ensuring nothing gets missed. Figma also lets you tag other stakeholders, creating transparent conversations where everyone stays informed. Think of it as a focused Slack thread attached to the exact design element being discussed.
Be specific in your feedback. "Make it pop more" leaves your designer guessing, but "This button doesn't stand out enough from the background – could we try a stronger color contrast?" gives clear direction. The best feedback explains the problem and the why behind it, letting your designer use their expertise to find the best solution.
Reviewing Prototypes and User Flows
When reviewing a prototype, approach it like a real user would. Try to complete actual tasks rather than just clicking around randomly. If you're reviewing an e-commerce design, try to find a product and go through checkout. For a signup flow, attempt to create an account from start to finish.
Note any moments of confusion or frustration. Did you click on something that wasn't actually clickable? Did you expect a back button that wasn't there? These instinctive reactions are gold for your designer. Users will have the same responses, so catching them now saves problems later.
Test on different devices if possible. A prototype might work beautifully on your large desktop monitor but feel cramped on your phone. While your designer likely considers multiple screen sizes, your real-world testing provides valuable validation.
Understanding Version History
Figma automatically saves versions of the file, creating a detailed timeline of the design evolution. You can access this through the file menu, seeing snapshots from different dates and times. Each version preserves the exact state of the design at that moment.
This history serves multiple purposes. If you prefer an earlier iteration of something, you can reference the specific version. It also helps you understand the reasoning behind changes. Maybe that button moved three times before finding its current spot – seeing this evolution provides context for the final decision.
Version history also acts as insurance. If something accidentally gets deleted or changed, your designer can restore previous versions. This safety net allows everyone to work more confidently, knowing nothing is permanently lost.
Best Practices for Asynchronous Collaboration in Figma
Since you and your designer may not always be online at the same time, mastering asynchronous collaboration is key. This means making your contributions clear and self-explanatory.
Working asynchronously actually has advantages. It gives everyone time to think through their feedback carefully rather than reacting immediately. Your designer can address comments when they're in their creative flow, and you can review designs when you have proper time to focus.
Leaving Clear and Actionable Feedback
Avoid vague comments like "I don't like it" or "This feels off." These leave your designer playing guessing games. Instead, dig deeper into why something isn't working. Is it not matching your brand voice? Does it make the user journey more complicated? Connecting feedback to concrete goals makes it actionable.
Frame feedback as problems to solve rather than solutions to implement. Instead of saying "Make this button green," try "This button doesn't stand out enough as our primary call-to-action." This respects your designer's expertise while clearly communicating the issue.
When possible, provide examples or references. If you love how another website handles something similar, share a screenshot. Visual references often communicate ideas more clearly than words alone. Just remember to use these as inspiration, not exact templates to copy.
Using Statuses in Comments (e.g., 'Resolved')
Once a designer addresses your feedback, they'll mark comments as resolved. This doesn't delete them – it just cleans up the workspace. Think of it like checking off items on a to-do list. You can always view resolved comments if you need to reference past discussions.
The comment status system keeps everyone organized. Open comments need attention, while resolved ones document decisions made. This creates a clear action list for your designer and shows progress to all stakeholders.
If you disagree with how something was resolved, you can reopen the comment and continue the discussion. This flexibility ensures nothing gets swept under the rug while still maintaining a clean, focused workspace.
Respecting the Designer's Workspace
Unless explicitly asked, stick to commenting rather than editing. Even in view-only mode, some clients receive edit access for specific reasons. Resist the temptation to "just quickly fix" something yourself. What seems like a simple change might break carefully crafted component systems or responsive layouts.
Think of the Figma file as your designer's workshop. You wouldn't walk into a carpenter's shop and start using their tools without permission. The same respect applies here. Your designer has organized everything in a specific way that supports their workflow.
If you absolutely need to make changes – perhaps updating copy or adding reference images – communicate first. Your designer can guide you on where and how to make these additions without disrupting their work. They might even create a dedicated page just for your contributions.
Conclusion
Mastering Figma as a non-designer isn't about learning every tool or feature. It's about understanding enough to communicate effectively and contribute meaningfully to the design process. With these basics under your belt, you can navigate files confidently, provide valuable feedback, and build stronger partnerships with your design team.
The key is remembering that good design is a collaborative effort. Your business insights combined with your designer's expertise create better outcomes than either could achieve alone. Figma simply provides the shared space where this collaboration happens.
Start small. The next time you receive a Figma link, try using comment mode to leave specific feedback. Click through prototypes like a real user would. Pay attention to the design phases and tailor your input accordingly. With practice, these actions become second nature, and you'll find yourself contributing more effectively to every project.
References
Like this project
Posted Jul 6, 2025
You don't need to be a designer to collaborate effectively in Figma. This guide breaks down the design workflow and shows you how to give feedback and work with your designer.
