Sketch Cloud & Inspect

Choose File > Share > Publish to Cloud (or click the Share button in the toolbar) to upload the current document. Every publish creates a new version in the document's Cloud history — treat it like a git commit. Add a version note describing what changed: 'Added empty states for search and cart; updated button hover states'. Sketch Cloud stores unlimited versions and lets you roll back to any previous state from the document timeline. Set visibility to Private (invite by email) for work-in-progress or 'Anyone with link' for open review sessions.

Developers open the Cloud link in any browser and see a pixel-accurate render of the canvas. Clicking any layer opens the Inspect panel on the right, showing the same data as the Sketch Inspector: dimensions, position, typography, colors, shadows, and borders. The Inspect panel also generates CSS snippets for selected layers. The auto-generated CSS uses absolute positioning and should be treated as a starting point — extract the dimension, color, and typography values rather than copying the layout code directly.

1/* Sketch Cloud Inspect auto-generated CSS (use as a reference, not copy-paste) */
2.button-primary {
3  width: 160px;
4  height: 44px;
5  background: #2563EB;
6  border-radius: 8px;
7  font-family: Inter;
8  font-size: 16px;
9  font-weight: 600;
10  color: #FFFFFF;
11  letter-spacing: -0.01em;
12  line-height: 24px;
13}

Any layer configured with export settings in Sketch is downloadable from the Cloud Inspect panel. Developers click the layer, scroll to Export in the Inspect sidebar, and download SVG or PNG at configured densities — no Sketch installation required. This eliminates the 'can you re-export this icon in 2x?' back-and-forth. Before publishing, configure export settings on all icon and image layers. Make this part of your pre-publish checklist alongside layer naming and style assignment.

Click the Comment icon (C) in the Cloud viewer toolbar to pin a comment to a specific position on any artboard. Comments support @mentions which trigger email notifications, and can be resolved once addressed — creating a permanent audit trail. This async loop replaces long Slack threads about specific design decisions: 'Should this button be disabled when the form is invalid?' pinned directly on the button is infinitely clearer than describing its position in a message. Resolved comments remain archived for audit and retrospective review.

Sketch Cloud Inspect suits small teams with basic CSS needs. Zeplin and Avocode offer richer code snippet generation — React, Swift, Kotlin — plus component-level documentation and design token export. Choose based on your team's actual needs:

1Sketch Cloud:    Free with Sketch subscription, zero setup,
2                 basic CSS snippets, works for 1-5 developers
3
4Zeplin:          Paid (free tier), framework-specific snippets
5                 (CSS/React/Swift/Kotlin), Styleguide auto-export,
6                 design token export, annotation layers
7                 Best for: multi-platform teams, design systems
8
9Avocode:         Paid, desktop-app rendering (no cloud upload),
10                 bulk asset export, configurable annotations
11                 Best for: teams with security/privacy constraints