Collaboration

January 14, 2025 · 7 min read

Work together seamlessly with real-time collaboration features.

Real-Time Collaboration

Multiple team members can edit the same file simultaneously.

Live Cursors

See who’s working in the file:

Cursor Indicators: Each person has a colored cursor with their name.

Following: Click someone’s avatar to follow their viewport.

Zoom to Selection: Double-click their avatar to see what they’re working on.

Presence Indicators

Know who’s active:

Active Users: Colored dots show who’s currently in the file.

Away Status: Grayed out when inactive for 5+ minutes.

Last Seen: Hover over avatar to see when they were last active.

Control who can access your files.

Share with team members or external stakeholders:

Click Share button (top right)
Enter email addresses
Set permission level
Add message (optional)
Click Send Invite

Permission Levels

Can Edit: Full editing access - can modify designs, create components, and publish changes.

Can View: View-only access - can see designs, leave comments, inspect properties, but cannot edit.

Can Comment: Can view and leave comments, but cannot edit designs.

Admin: Full access plus ability to manage sharing and permissions.

Share via link for broader access:

Public Link: Anyone with the link can view.

Private Link: Only people in your workspace can access.

Settings:

Allow comments
Allow downloads
Password protection (Pro)
Expiration date (Pro)

Comments

Communicate directly on designs.

Adding Comments

Place Comment:

Press C or click comment icon
Click on design where you want to comment
Type your message
Click Post or press Cmd+Enter

Text Selection: Select text and click comment icon to comment on specific text.

Frame Comments: Comments placed on a frame’s header appear in file outline.

Comment Features

@Mentions: Type @ to mention team members - they’ll get notified.

Emoji Reactions: React to comments with emoji instead of replying.

Threads: Reply to comments to create threaded discussions.

Attachments: Attach images to clarify feedback.

Rich Text: Format comments with bold, italic, and code.

Comment Management

Resolve: Mark comments as resolved when addressed.

Filter: View only open comments or show resolved.

Sort: By newest, oldest, or position in file.

Notifications: Get notified when mentioned or when someone replies.

Team Libraries

Share design systems across your organization.

Publishing Team Libraries

Make components available team-wide:

Create library file with components
File → Publish Library
Choose Team Library (visible to whole team)
Write description
Click Publish

Subscribing to Libraries

Access shared libraries:

Assets → Libraries
Browse available team libraries
Click Subscribe to add to your workspace
Components appear in Assets panel

Library Updates

Publishing Updates: When you update a library, users get notified.

Accepting Updates:

Notification appears: “Library has updates”
Click Review Changes
See what changed
Click Update to accept

Selective Updates: Choose which instances to update - update all or specific instances.

Version History

Track changes and restore previous versions.

Viewing History

Access version history:

File → Version History or Cmd+Option+H
Timeline shows all changes
Scrub through history to see changes
Preview any previous version

Auto-Saves

Acme saves automatically:

Save Frequency: Every few seconds while editing.

Named Versions: Save important milestones with names:

File → Save as Version
Enter version name: “Final for review”
Click Save

Restoring Versions

Restore a previous version:

Find version in history
Click Restore
Confirm restoration
Previous state is restored and saved as new version

Note: Restoring doesn’t delete history - you can always undo.

Branching

Work on variations without affecting main file.

Creating a Branch

Experiment without disrupting main file:

File → New Branch
Name your branch: “dark-mode-exploration”
Make changes in branch
File icon shows branch name

When to Branch

Exploration: Try different design directions.

Major Changes: Redesign sections without disrupting team.

Feature Work: Develop new features independently.

Client Variants: Create custom versions for different clients.

Branch Workflow

Create Branch from main file
Make Changes in your branch
Request Review when ready
Team Reviews and comments
Merge back to main when approved

Merging Branches

Merge changes back to main:

File → Merge Branch
Review changes side-by-side
Resolve conflicts if any
Write merge message
Click Merge

Conflict Resolution: When same element was changed in both:

See both versions
Choose which to keep
Or manually combine changes

Team Workspace

Organize projects and collaborate as a team.

Workspace Structure

Acme Design Team (Workspace)
├── Projects
│   ├── Mobile App Redesign
│   ├── Marketing Website
│   └── Design System
├── Templates
│   ├── Presentation Template
│   └── Wireframe Kit
└── Archive
    └── Old Projects

Project Organization

Projects: Group related files together.

Folders: Organize within projects.

Tags: Add tags for easy filtering:

#in-progress
#needs-review
#approved
#archived

Team Dashboard

Overview of team activity:

Recent Files: Files recently edited by team.

Shared with Me: Files others have shared.

Starred: Your favorite/important files.

Activity Feed: Recent changes and comments.

Review & Feedback

Streamline design review process.

Review Mode

Present designs for feedback:

Click Present or press Cmd+Option+P
Full-screen presentation mode
Navigate with arrow keys
Exit with Esc

Features:

Hide UI for clean presentation
Navigate between artboards
Zoom and pan
Show/hide comments
Interactive prototypes

Collecting Feedback

Stakeholder Review:

Share file with Can Comment permission
Add comment: “Please review by Friday”
@mention stakeholders
They review and leave comments
Address feedback
Resolve comments when done

Async Feedback: Team members can review and comment anytime.

Meeting Reviews: Share screen and walk through designs together.

Approval Process

Track approval status:

Status Labels:

🟡 In Progress
🟣 Ready for Review
🔵 In Review
🟢 Approved
🔴 Changes Requested

Add status in file description or use plugins.

Developer Handoff

Bridge design and development.

Inspect Mode

Developers can inspect designs:

Access: Share file with Can View permission.

Features:

View dimensions and spacing
Copy CSS/iOS/Android code
Download assets
See color values
View text styles

Specs

Provide detailed specifications:

Auto Specs: Acme automatically provides:

Dimensions (width, height)
Position (x, y)
Spacing (margins, padding)
Colors (hex, RGB, HSL)
Typography (font, size, weight, line height)
Effects (shadows, borders)

Annotations: Add comment annotations for:

Implementation notes
Interaction details
Edge cases
Technical constraints

Asset Export

Export assets for development:

Manual Export:

Select layers to export
File → Export
Choose format and settings
Export

Bulk Export: Mark layers for export:

Select layer
Export Settings in right panel
Add export format (PNG, SVG, JPG, PDF)
Set resolution (1x, 2x, 3x)
File → Export All exports all marked layers

Naming: Use developer-friendly names:

icon_chevron_right.svg
[email protected]
img_hero_desktop.jpg

Code Snippets

Generate code from designs:

CSS:

.button-primary {
  padding: 12px 24px;
  background: #3B82F6;
  border-radius: 8px;
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}

iOS Swift:

let button = UIButton()
button.backgroundColor = UIColor(hex: "3B82F6")
button.layer.cornerRadius = 8
button.titleLabel?.font = UIFont(name: "Inter-SemiBold", size: 16)

Android XML:

<Button
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:padding="12dp"
    android:background="#3B82F6"
    android:textSize="16sp" />

Communication Tools

Stay connected with your team.

In-App Chat

Quick communication without leaving Acme:

File Chat: Discuss file-level topics.

Direct Messages: Private messages to team members.

Threads: Keep conversations organized.

Integrations

Connect with team tools:

Slack:

Notifications for file updates
Share files to Slack channels
Preview files in Slack
Start comments from Slack

Microsoft Teams:

File update notifications
Share designs to channels
Collaborate without context switching

Jira:

Link designs to tickets
Track design progress
Update status from Acme

Asana/Monday:

Attach designs to tasks
Update task status
Get design notifications

Notifications

Stay informed with smart notifications:

Settings: Customize what you’re notified about:

@mentions
Comments on your files
Replies to your comments
Shares and invites
Library updates
Team activity

Delivery: Choose how to receive:

In-app notifications
Email digests
Slack/Teams messages
Desktop notifications

Best Practices

Tips for effective collaboration.

Organize Files

Clear Names: Use descriptive file names:

✅ “Mobile App - Home Screen Redesign”
❌ “Untitled 7”

Folder Structure: Keep files organized in projects and folders.

Naming Conventions: Establish team naming standards.

Communicate Clearly

Descriptive Comments: Be specific in feedback:

✅ “Let’s increase the button padding to 16px for better touch targets”
❌ “Make it bigger”

Context: Explain reasoning behind design decisions.

Questions: Ask clarifying questions when unsure.

Respect Time Zones

Async-First: Design for asynchronous work:

Clear documentation
Detailed comments
Recorded walkthroughs

Overlap Hours: Schedule meetings during overlap times.

Response Times: Be patient with different time zones.

Set Expectations

Deadlines: Clear timelines for reviews and feedback.

Response Time: When you’ll provide feedback or updates.

Working Hours: When you’re available for synchronous work.

Keep Files Clean

Delete Unused: Remove old iterations and unused elements.

Organize Layers: Proper naming and grouping.

Performance: Keep files fast for everyone.

Next Steps