Zeplin Keyboard Shortcuts
Zeplin exists specifically for the handoff moment between design and development, and its shortcut set reflects that narrow, specific job rather than general design creation — there's no drawing or shape tool vocabulary here at all, since Zeplin doesn't create designs, it receives them from Figma or Sketch and generates developer-facing specs and assets from what's imported. Its measurement and inspection shortcuts (clicking an element to see its exact spacing, color values, and font specs) are the core interaction most developers actually use Zeplin for, replacing the older, more error-prone workflow of a developer eyeballing a design file or asking a designer to manually document every spacing value. Because generating clean, correctly-named export assets (icons, images) at the right resolution for a target platform is another core job, the export shortcuts carry outsized weight in Zeplin specifically because generating those assets correctly is close to the entire reason developers open the tool in the first place, not a side feature bolted onto something else. Version history within a Zeplin project tracks each re-import or update from the source design tool as a distinct snapshot, letting a developer confirm exactly which version of a screen they're inspecting if a design has changed mid-sprint. Comments attached directly to specific elements on a screen let developers flag ambiguities or ask clarifying questions right where the confusion actually is, rather than in a separate chat thread disconnected from the specific pixel or component in question.
Inspection Specs
| Action | Windows | Mac | Description |
|---|---|---|---|
| Inspect selected element's specs | Click element on screen | Click element | Selects a design element to reveal its exact spacing, color values, typography, and other CSS-relevant specs in the side panel, the core interaction most developers use Zeplin for during implementation. |
| Measure distance between two elements | Hold Alt/Option and hover second element | Hold Option and hover | Shows the exact pixel distance between the currently selected element and whatever element you're hovering over while holding the modifier key, replacing manual measurement or guesswork during implementation. |
| Copy CSS for selected element | Right-click element > Copy CSS | Right-click > Copy CSS | Copies generated CSS properties for the selected element directly to the clipboard, ready to paste into a stylesheet, saving the developer from manually transcribing spacing and color values from the design. |
| Add a comment on an element | Click element > Comment icon | — | Attaches a comment directly to a specific element on a screen, letting a developer flag an ambiguity or ask a question anchored exactly to the pixel or component in question rather than in a disconnected chat thread. |
| Toggle layout grid overlay | Screen view > Grid toggle icon | Same | Overlays the design's configured layout grid directly on the inspected screen, helping a developer confirm that implemented spacing and column widths genuinely line up with the grid the designer built the layout against rather than eyeballing alignment. |
Asset Export
| Action | Windows | Mac | Description |
|---|---|---|---|
| Export selected asset | Select asset > Export button (no dedicated key) | — | Exports the selected image or icon asset at its configured resolutions and formats, generating correctly named files ready to drop into a codebase without manual renaming or resizing. |
| Configure export resolution/format settings | Asset panel > Export Settings | — | Configures which resolutions (1x, 2x, 3x) and formats (PNG, SVG, PDF) an asset exports as, letting a project maintain consistent export conventions across a whole design system. |
| Download a font used in the design | Typography panel > Download Font | — | Downloads the specific font file referenced in the design's typography specs, useful when a developer's system doesn't already have that font installed for accurate local preview. |
Navigation
| Action | Windows | Mac | Description |
|---|---|---|---|
| Navigate between imported screens | Sidebar screen list (no dedicated key) | — | Switches between different imported screens or artboards within a Zeplin project, primarily through the sidebar list rather than a dedicated keyboard shortcut. |
| View project version history | Project menu > Version History | — | Pulls up a timeline of every re-import from the source design file, so you can double-check you're actually inspecting the screen's current state and not a version that predates a designer's more recent update. |
| Compare two versions of a screen | Version History > Compare | Same | Shows a visual diff between two snapshots of the same screen from its version history, highlighting exactly what changed between an earlier import and a newer one rather than requiring a developer to spot the difference by eye across two separately opened versions. |
Frequently Asked Questions
Does Zeplin let me edit the actual design, or only inspect and export from it?
Zeplin is intentionally inspection-and-handoff-only — it imports designs from Figma, Sketch, or Adobe XD and generates specs, code snippets, and export assets from them, but it doesn't provide design creation or editing tools itself, since actual design work is expected to happen in the source design tool and then synced or re-imported into Zeplin.
Does updating the original Figma or Sketch file automatically update the Zeplin project?
This depends on your workflow and Zeplin's specific integration setup — some connections support re-syncing an updated design file into an existing Zeplin project, but it's generally a deliberate sync/update action rather than continuous automatic real-time mirroring the way editing directly within a single tool would be.
Is the CSS Zeplin generates production-ready, or does it need developer cleanup?
Generated CSS accurately reflects the design's visual properties as a helpful starting point, but it typically needs adaptation to fit a project's actual CSS architecture — naming conventions, existing utility classes, responsive breakpoints — rather than being pasted in wholesale as final production code without review.
Can I tell if a screen's design has changed since I last implemented it?
Yes — open the version history panel and you'll see every re-import stamped with a timestamp, so you can confirm whether the screen you built against is still current or whether the designer has pushed changes since. Zeplin doesn't auto-notify you of updates by default, so it's worth checking this manually on longer-running tickets rather than assuming a screen you opened days ago is still accurate.
How do developers ask questions about a confusing part of a design without leaving Zeplin?
A comment can be pinned right onto the element in question, tying the discussion to that exact pixel or component instead of forcing it into a separate chat thread that has lost all visual context.
What happens if a font used in the design isn't installed on my development machine?
The Typography panel provides a direct download link for the specific font referenced in the design's specs, letting a developer grab the exact font file needed for accurate local preview rather than guessing at a close substitute.
Can Zeplin generate code beyond just CSS, like React or SwiftUI components?
Depending on integrations and plugins, Zeplin can generate code snippets for some additional frameworks beyond plain CSS, though the depth and accuracy of generated framework-specific code varies, and most teams still treat generated code as a helpful starting reference rather than final production-ready component code.
Can I visually confirm my implementation lines up with the design's grid system?
Yes — toggling the layout grid overlay on an inspected screen shows the exact grid the designer built against, letting you check that your implemented spacing and column widths genuinely align with it rather than relying on eyeballing the layout against a flat screenshot with no grid reference visible.