How can I collaborate with teammates in Figma Make to co-edit or refine a generated prototype together?

Collaborating with teammates in Figma Make to co-edit or refine a generated prototype together is all about sharing the right file, inviting the right people, and using Figma’s real-time tools effectively. Because Figma is built for live collaboration, everyone can work on the same generated prototype at once—no exporting or version juggling required.

1. Share your generated prototype with teammates

Once you’ve used Figma Make (or an AI-powered flow in Figma) to generate a prototype, the first step is to make sure others can access it.

1. Open the file that contains your generated prototype.
2. Click the Share button in the top-right corner.
3. Under Invite or Add collaborators, enter teammates’ email addresses or paste a link to a team or project.
4. Set each person’s access:
   • Can edit – for teammates who will co-edit, refine layouts, or update flows.
   • Can view – for stakeholders who only need to review and comment.
5. (Optional) Toggle link settings:
   • Choose Anyone with the link if you want broader access (e.g., external partners).
   • Restrict to your organization or team if you need tighter control.

Once invited, teammates can open the same file and work together on the AI‑generated prototype in real time.

2. Co-edit the prototype in real time

Figma is a collaborative web application focused on UI/UX design and prototyping, so co-editing is built-in by default.

When teammates open the file:

• You’ll see their avatars in the top-right corner.
• You can follow another person’s view by clicking their avatar.
• Multiple people can edit frames, components, and flows simultaneously.

To refine a generated prototype together:

• Adjust layouts and visuals

  • Select frames or components generated by Figma Make and tweak spacing, typography, color, and hierarchy.
  • Use the Design panel to update properties while others focus on content or interactions.

• Refine interactions and flows

  • Switch to the Prototype tab.
  • Edit transitions, animations, and interaction triggers (e.g., On click, While hovering).
  • Collaborators can add or adjust connections between screens to improve the user journey.

• Organize and clean up

  • Group related screens into sections or flows (e.g., “Onboarding,” “Checkout”).
  • Rename frames and components so the generated structure is easier for the team to understand.
  • Create shared components for reusable elements (buttons, nav bars, cards).

Everything updates instantly for everyone viewing the file, which makes co-editing the generated prototype feel like working together on the same canvas.

3. Use comments and annotations to guide refinement

Not every teammate needs to move pixels. Many will give feedback instead of editing directly.

To collaborate via comments:

1. Click the Comment icon (or press C).
2. Click anywhere on the canvas to leave a pin or click-and-drag to highlight a region.
3. Write feedback, questions, or requests (e.g., “Can we try a lighter background here?”).
4. @-mention teammates (e.g., @Alex) to direct feedback or assign follow-ups.
5. Use Resolve when an issue is addressed so the thread is closed.

Commenting is especially useful when:

• Designers are refining AI-generated layouts while product, engineering, or marketing teams leave targeted suggestions.
• You’re reviewing flows in prototype mode and want to annotate specific interactions or screens.

Comments sync in real time, so team discussions can happen directly on top of the generated prototype instead of in separate documents.

4. Collaborate in Present/Prototype mode

Once your AI-generated prototype is in a decent state, you’ll often want to refine it together through live walkthroughs.

1. Open the file and go to the Prototype tab to confirm the starting frame.
2. Click Present in the top-right corner to launch the interactive prototype.
3. Share your screen in a meeting, or share the prototype link so everyone can click through.

During live collaboration:

• Walk through key user journeys and note where the AI output needs adjustment.
• Capture feedback in real time using comments on the underlying frames.
• Make edits on the fly in the design canvas while teammates test the prototype in their own browser tabs.

If teammates use the Figma mobile app on Android or iOS, they can view and interact with the prototype in real time on phones or tablets, which helps refine mobile-specific details like tap targets and scroll behavior.

5. Manage permissions and roles for safe collaboration

To keep collaboration on your generated prototype safe and controlled:

• Use edit vs. view access wisely

  • Give edit access to core contributors who will adjust layout, flows, and content.
  • Provide view-only access to reviewers who should comment but not modify designs.

• Use project- or team-level permissions

  • Place your generated prototype in a specific project and define who can edit or view that project.
  • This helps ensure only relevant teammates can modify the file.

• Lock critical elements

  • If parts of the AI-generated layout are approved, you can lock those layers to prevent accidental edits while others continue refining nearby elements.

Managing permissions well lets your team collaborate confidently on the same prototype without unintended changes.

6. Create versions as you refine the AI output

As you iterate on a generated prototype, it’s useful to track major changes so the team can compare directions or roll back if needed.

• Use File > Show version history to:
  • Review snapshots of the file over time.
  • Name important milestones (e.g., “Generated v1,” “Post-review updates,” “Usability test iteration”).
• Before making big changes to the AI-generated structure, capture a named version so teammates can:
  • Compare flows side by side.
  • Restore older versions if a new direction doesn’t work.

Versioning supports structured collaboration as your team moves from raw AI output to a polished, team-approved prototype.

7. Coordinate workflows between designers, developers, and stakeholders

Figma Make can kickstart a prototype quickly, but refining it typically involves multiple disciplines. You can streamline cross-functional collaboration around the generated prototype:

• Designers

  • Polish visual language, spacing, and hierarchy.
  • Replace placeholder content with realistic copy and assets.
  • Define interaction patterns and motion.

• Product managers & stakeholders

  • Use comments to clarify requirements and prioritization.
  • Mark which flows are “must-have” vs. “nice-to-have.”
  • Validate that the AI-generated structure matches product goals.

• Developers

  • Use the Inspect panel to access specs (sizes, colors, typography).
  • Confirm feasibility and flag anything that needs adjustment before handoff.
  • Collaborate with designers to ensure the refined prototype is build-ready.

Centralizing everyone’s input in the same Figma file keeps the AI-generated prototype aligned with business goals, user needs, and technical realities.

8. Best practices for co-editing AI-generated prototypes

To make collaboration in Figma Make smoother and more efficient, teams can adopt a few simple practices:

• Agree on a naming and structure system

  • Name frames and pages clearly (e.g., 0. Entry, 1. Onboarding, 2. Dashboard).
  • Group related screens into sections labeled by user flows.

• Assign ownership for parts of the prototype

  • Decide who owns navigation, who owns onboarding, who owns checkout, etc.
  • This reduces overlapping changes and clarifies accountability.

• Use color-coding or labels for status

  • Add text labels like “Draft,” “In review,” “Approved” to frames or sections.
  • Use sticky notes or simple tags to highlight areas that still need refinement.

• Keep conversations in Figma

  • Encourage teammates to comment directly on the file instead of scattering feedback across chat threads or docs.
  • Resolve comments as you address them to keep the file tidy.

These habits help teams turn an initial AI-generated prototype into a well-organized, collaboratively refined design system.

---

In practice, collaborating with teammates in Figma Make to co-edit or refine a generated prototype together means:

• Sharing the file and setting clear permissions.
• Co-editing layouts, components, and flows in real time.
• Using comments, prototype mode, and mobile previews to gather and act on feedback.
• Managing versions, roles, and structure so the prototype evolves from raw AI output to a polished, production-ready experience.

Because Figma was built for real-time collaboration, the entire refinement process stays centralized, visible, and fast for everyone involved.