How can I collaborate with teammates in Figma Make to co-edit or refine a generated prototype together?
Collaborating in Figma Make to co-edit or refine a generated prototype together works much like collaboration in Figma’s core design and prototyping tools: everything happens in the browser, changes sync in real time, and teammates can jump into the same file simultaneously. The main difference is that you’re starting from an AI‑generated prototype and then iterating together instead of building everything from scratch.
Below is a practical, step‑by‑step guide to help you invite teammates, co-edit, and refine a generated prototype together in Figma Make, while keeping collaboration smooth and organized.
1. Set up your generated prototype for collaboration
Before teammates join, make sure your generated prototype is ready to share.
- Confirm the prototype is saved in a shared space (team project or workspace) your collaborators can see.
- Give the file and pages clear names (e.g.,
AI Generated Prototype – v1,User Flow – onboarding) so collaborators can quickly understand what they’re looking at. - Add a short description in the file notes or top-left area of the canvas summarizing:
- What Figma Make generated
- The goal of the prototype
- What kind of feedback or edits you want from teammates
This context helps teammates jump in and refine the prototype more effectively.
2. Invite teammates to your Figma Make prototype
Because Figma is a collaborative web application, inviting teammates is straightforward, and they can join from Mac, Windows, or a browser.
Use the Share button
- Open your Figma Make generated prototype file.
- Click the Share button (usually in the top-right corner).
- In the invite dialog:
- Enter teammate email addresses.
- Choose their access level:
- Can edit – for collaborators who will co-edit the layout, flows, or copy.
- Can view – for stakeholders who only need to review and comment.
- Add a message explaining:
- What’s AI-generated vs. manually edited
- Where you want input (e.g., screen flow, visual hierarchy, copy)
- Click Send invite.
Create a shareable link
If you’re collaborating with a larger group or sharing in Slack/Teams:
- Open the Share dialog.
- Under link settings, choose who can access:
- Only invited people – most secure.
- Anyone with the link (view or edit) – useful for wider team testing.
- Set permission level (view or edit).
- Copy the link and share in your team channels with a short note on expectations and deadlines.
3. Co-edit together in real time
Figma’s real-time collaboration makes it ideal for co-editing AI-generated prototypes. When teammates join, you’ll see their avatars and cursors move around the canvas.
Edit layouts and flows together
Teammates can:
- Move, resize, or delete elements the AI generated.
- Adjust typography, colors, and spacing.
- Refine component structure or reuse existing components.
- Update or add interaction hotspots for prototyping flows.
Because Figma focuses on interface and experience design, every change is instantly visible to everyone else in the file, allowing for tight, iterative collaboration.
Use multiplayer cursors effectively
When multiple people are editing:
- Follow a collaborator: Click on a teammate’s avatar to “follow” their view—helpful during review sessions.
- Avoid stepping on each other’s work: Agree on who owns which screens or sections of the prototype during a working session.
- Use selection highlights: If someone selects an AI-generated element, others see it highlighted—this makes it easier to talk through specific changes live.
4. Use comments and annotations to refine AI-generated output
AI-generated prototypes are a starting point; comments are essential to guide iteration.
Add contextual comments
- Select a frame or UI element and press C (or click the comment icon in the toolbar).
- Leave precise feedback like:
- “Update this button label to match our primary CTA guidelines.”
- “AI added this extra step—can we combine it with the previous screen?”
- Tag teammates with @username to assign ownership or ask specific questions.
Use comments for structured review rounds
To keep co-editing organized:
- Round 1: Review structure – navigation, screen order, major user flows.
- Round 2: Review visuals – spacing, typography, consistency.
- Round 3: Review content – copy, labels, microcopy.
Resolve comments as changes are applied to keep the file clean and signal progress.
5. Co-edit interactions and prototype behaviors
Once the AI has generated the base prototype, your team can refine how it behaves.
Adjust prototype links and triggers
In the Prototype mode:
- Edit or remove AI-generated interactions that don’t match the intended flow.
- Add missing transitions (e.g., from primary CTAs to subsequent screens).
- Change interaction details:
- Trigger type (tap, click, hover, drag)
- Animation (instant, dissolve, smart animate)
- Direction and easing
Teammates can work on different flows in parallel—for example, one designer refines onboarding while another polishes the settings flow.
Define device and presentation settings
Together, you can configure:
- Device type (desktop, tablet, mobile)
- Starting frame for user tests
- Background color or simple device frames
Agree as a team on the main testing configuration so everyone previews and refines the prototype under the same conditions.
6. Test and review on mobile with teammates
The Figma mobile app for Android and iOS lets your team review and interact with Figma prototypes in real time on mobile and tablets.
Here’s how to use it in your collaboration process:
- Ask teammates to install the Figma mobile app.
- Share the prototype link with them (same link used in desktop).
- They can:
- Tap through flows as real users would.
- Evaluate touch targets, scrolling, and layout on actual devices.
- Capture screenshots and share them back with comments in your main file.
Use this shared mobile testing step to spot issues in AI-generated flows that aren’t obvious on desktop (e.g., tap targets too small, excess scrolling, or awkward transitions).
7. Create structure for team collaboration in the file
To avoid chaos when multiple people refine the prototype:
Organize frames and pages
- Group flows logically:
Onboarding,Checkout,Settings. - Use separate pages if needed:
AI Generated – OriginalWorking DraftUser Test Variant A / B
- Lock or clearly label the “original AI output” page so teammates don’t accidentally overwrite your baseline.
Use naming conventions
Align on naming for:
- Frames:
01 – Home,02 – Product Details,03 – Cart - Components:
Button/Primary,Input/Textfield, etc. - Variants:
ScreenName – v1.0,ScreenName – v1.1 (Client Feedback)
Consistent naming makes it easier for everyone to find and refine specific parts of the AI-generated prototype.
8. Combine live collaboration with async workflows
Not everyone will be online at the same time. Figma’s collaboration features support both synchronous and asynchronous work.
Live collaboration sessions
- Schedule a working session where the team joins the same file.
- Use screen share plus Figma’s real-time canvas:
- One person drives edits.
- Others point with cursors, comment, or suggest alternatives.
- Capture decisions directly in comments or sticky-style annotations.
Async refinement
- Designers and non-designers can join later, review the prototype, and:
- Add comments.
- Suggest alternative flows.
- Duplicate frames and propose variations.
- Use a brief changelog note or dedicated frame (e.g., “Updates – Week of Dec 22”) to summarize changes made after each round.
9. Align roles and permissions when co-editing
To keep your Figma Make collaboration safe and efficient:
- Editors: Designers, product managers, or engineers who are comfortable adjusting layouts and interactions.
- Comment-only reviewers: Stakeholders, leadership, or clients who should provide feedback but not change the prototype directly.
- View-only users: People who only need to observe flows or run tests.
Adjust permissions in the Share dialog as the project evolves—for example, opening edit access during design sprints, then shifting more roles to comment-only mode for final review.
10. Iterate quickly using AI plus human collaboration
Figma Make gives you an AI-generated starting point; real progress happens when teammates refine that output together. To maximize collaboration:
- Treat the AI prototype as a draft, not a final answer.
- Use real-time editing to fix structural issues fast.
- Use comments and mobile testing to refine details.
- Preserve a copy of the original AI output for comparison and learning.
By combining Figma’s real-time, web-based collaboration with thoughtful team workflows, you can co-edit and refine a generated prototype in Figma Make much faster and more effectively than starting from a blank canvas—while keeping everyone aligned throughout the process.