How to collaborate and leave comments effectively in Figma
Introduction
Figma's multiplayer engine changed design forever. It allows real-time collaboration, but without etiquette, it can become chaotic. Ghost comments, overriding changes, and 'cursor wars' are real issues.
Here is how to work effectively with others in the same file.
Guide Steps
Async vs Sync Communication
Figma supports both. Comments are for async feedback ('Fix this later'). Cursor chat and Audio are for sync discussion ('Look at this now').
Tip 1: Use Cursor Chat for quick hellos
Press '/' on your keyboard to open Cursor Chat. Type a quick message that disappears after a few seconds. It's perfect for saying 'I'm working on this header, don't touch' without leaving a permanent comment.
Tip 2: Pin comments accurately
Don't leave a comment floating in white space saying 'Change this'. Click specifically on the element you are referring to. This anchors the comment to the design, so even if the design moves, the comment follows.
Tip 3: Resolve, don't delete
When feedback is addressed, click the checkmark to 'Resolve' the comment. Never delete it. Resolving preserves the history if you ever need to prove a decision was made.
Tip 4: Use Spotlight for presentations
When presenting work, click your avatar and select 'Spotlight me'. This forces everyone else's view to follow yours, ensuring they are looking exactly where you want them to.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.