26

    Collaborating with Teams in Figma

    By Nitin Khatri (Senior UI/UX Designer & Educator)
    Reviewed by Sarah Miller (Principal Product Designer (Reviewer))
    Updated
    Video Lesson: 11:15
    Level: Advanced
    Official References:
    Figma Help CenterFigma YouTube Channel

    Figma is built for teamwork. This lesson covers how to share files, manage permissions, and leave effective feedback through comments and live collaboration.

    Complete tasks and quiz to finish this lesson.
    Tasks
    Quiz

    Lesson Video

    Lesson Content

    Learning Objectives

    • •Invite collaborators and manage View vs. Edit permissions
    • •Use the Comment tool to provide clear and actionable feedback
    • •Co-edit in real-time without overwriting teammates' work
    • •Utilize 'Observe' mode to follow another designer's screen

    What You'll Learn

    1. Setting up shared project workspaces
    2. The etiquette of live collaboration and multi-player design
    3. Resolving and tracking comments for project management
    4. Version history basics: when to save custom versions

    Key Concepts

    Permissions Management
    Live Collaboration
    Feedback Cycles
    Version Control

    Key Takeaways

    • ✓Figma's real-time nature eliminates the need for separate file versions.
    • ✓Comments are the best way to keep feedback discussions central to the design.
    • ✓Observing another user is excellent for design walkthroughs and reviews.
    • ✓Maintaining clear permissions ensures file security and project integrity.

    Practice Tasks

    Feedback and Review Cycle

    Simulate a professional design review process using Figma's collaboration tools.

    • Use the 'Comment' tool (C) to leave feedback on a specific design element
    • Mention a teammate using the '@' symbol in a comment thread
    • Resolve a comment and verify it moves to the 'Resolved' archive
    • Pin a comment to a specific coordinate on a complex component

    Design Versioning

    Manage the evolution of your design with clear history and milestones.

    • Open 'Version History' and name the current version 'V1.0 - Initial Draft'
    • Make a significant design change and save a second version
    • Use the 'Show changes' feature to compare two different versions
    • Restore an older version to verify the rollback process

    Knowledge Check

    Pass with 75% or higher

    1. How can you follow exact movements of another designer in real-time within a Figma file?

    2. What is the primary benefit of the 'Comment' tool in Figma?

    3. What happens when you 'Resolve' a comment in Figma?

    4. Which permission level allow users to see the design and use Dev Mode, but NOT move or edit layers?

    Lesson FAQ

    Q: How can I practice what I learned in this lesson?

    We highly recommend opening your own Figma workspace in a side window and repeating the steps shown in the video. Utilize the tasks checklist above for specific practice targets.

    Q: What should I do if my layout behaves differently from the walkthrough?

    Double-check parent-child constraints and resizing values (e.g. Hug vs Fill). Ensure Auto Layout direction is correct and check the related guidebooks below for step-by-step visual references.

    Lesson Resources & Connections

    Prerequisites

    No prerequisites required. This is a foundational starter lesson.

    Related Guidebook

    How to collaborate and leave comments effectively in Figma

    Read Guidebook →

    Relevant Design Tool

    Image Compressor

    Reduce asset size before export.

    Open Companion Tool →

    Next Lesson

    Preparing Designs for Developer Handoff