use-case · designers · figma
For designers: faster Figma feedback with DrawShot
I'm a designer. I spend a lot of time in Figma, both producing work and reviewing other people's. Feedback is the bottleneck — not the design itself, but the coordination of leaving comments, sharing references, and capturing context from outside Figma.
DrawShot has reshaped my feedback workflow in three specific ways. This is the writeup.
The feedback loop today
A typical design review thread looks something like:
- Open the Figma file.
- Spot a thing that needs work.
- Leave a Figma comment ("the spacing here feels too tight").
- Realize a screenshot from a competitor would explain better.
- Switch to Chrome,
⌘⇧4the competitor. - Save the screenshot somewhere.
- Switch back to Figma, attach it to the comment.
- Realize the comment thread now has a screenshot but no annotation showing what you want to copy from the competitor.
- Re-open the screenshot in Preview, draw an arrow.
- Save again, re-attach to comment, delete the first attachment.
Maybe 90 seconds of context-switching per comment. If you leave 10 comments per review, that's 15 minutes of design-review overhead that has nothing to do with design.
What DrawShot changes
Three things specifically.
1. The "compare against this" reference capture
The most common annotation pattern in design feedback: "look at how X handles this." You capture a piece of another product, mark up the relevant element, and drop it into a comment.
DrawShot makes this fast enough to be casual:
⌘⇧2the competitor's UIRto draw a rectangle around the element worth noticing- Maybe a text label:
T, type "compare this radius" ⌘C, paste into the Figma comment
~6 seconds. The threshold for "is this worth attaching" drops dramatically. You attach more, the feedback is richer.
2. The "annotate over a Figma frame" review
For commenting on someone else's work, the Figma comment tool is fine for pointing — but a circle in Figma comments is awkward for indicating "this whole section needs work" or "I want this aligned with that."
What I do now:
⌘⇧2the Figma frame.- Use the highlighter (
H) for "this whole region" thoughts. - Use arrows (
A) for "this aligns to that" thoughts. - Use step markers (
S) for "do this, then this, then this" rework plans. ⌘C, drop the annotated screenshot into the Figma comment.
The annotated screenshot survives even if the designer iterates on the frame — your comment now references the version you were reviewing, not the moving target.
3. The "spec a state for the engineer" capture
The handoff capture. The designer ships a Figma file; the engineer asks "what's the focus state of this button?" The designer's options:
- Add a hover variant to Figma (correct, but slow if the design is shipped)
- Describe it in text (lossy)
- Take a screenshot of a similar pattern from another product (fast, often clearest)
DrawShot is the fast option. Capture from anywhere — a working product, a competitor, a CSS reference — annotate the part the engineer cares about, paste into Slack with one line of context. The whole exchange takes 20 seconds.
Patterns I see working
From three designers I interviewed for this post. Names anonymized.
Use color consistently across feedback
Pick one color for "this is wrong" (red) and one for "this is right" (green). Use them every time across every Figma comment. Over weeks, your team starts reading the visual language without thinking — a red rectangle means "fix this," a green rectangle means "preserve this."
Color 1 is red, color 3 is green in DrawShot. Keys 1 and 3 switch between them. Build the muscle memory.
The "before / after" capture pair
For redesigns: capture the current version, capture the proposed version, annotate both with green rectangles on the better aspects of each. Paste both into the same Figma comment. The reviewer sees the comparison side-by-side without having to switch frames.
Step markers for design QA
When reviewing a designer's prototype before it ships:
- Capture the prototype frame
- Drop step markers (
S) at every interactive element - Add a small text caption for each ("hover should reveal the menu", "tap should expand", etc.)
One image, six step markers, comprehensive review. Saves having to leave six separate Figma comments.
Blur generously on user research captures
If you screenshot anything from a user research recording — Zoom, Lookback, Maze — blur the participant's face and any visible PII. The blur tool (B) handles this in two seconds. Don't share research captures without it; you'll regret it the first time something gets forwarded.
For higher-stakes redaction (legal, partnership reviews), ⌘E → Export → "Flatten with redaction" replaces blurred pixels with solid black before the file is written.
Highlighter for typography critiques
When the issue is type — line height, kerning, hierarchy — the highlighter tool (H) is the right primitive. Drag a semi-transparent yellow over the affected text, paste into the comment. The reviewer's eye goes to the highlighted text immediately, no description needed.
The Figma comment vs. external screenshot question
A real tension in design feedback: Figma comments are attached to a specific element. They follow the design as it changes. External screenshots are a one-time snapshot.
When to use which:
- Figma comment, no screenshot: "the copy is too long" — text-only critique on the element.
- Figma comment + Figma's built-in markup: "the spacing here looks tight" — visual but contained.
- Figma comment with attached DrawShot annotation: "I want this to feel more like [external reference]" — pulls in context that doesn't live in the file.
- Slack with DrawShot annotation: "in the file you sent earlier, this section needs rework" — when the conversation needs to leave Figma.
DrawShot is best at the third and fourth. Don't replace Figma's comment system with it; layer it on top.
Specific examples from my own week
Last week, three places DrawShot saved me significant time:
Tuesday — copy review. Reviewed marketing copy on a partner's landing page. Captured 4 sections of their page, used red rectangles for "feels too long" and green rectangles for "this works." Pasted all four into a single Slack message with brief notes. The marketing lead's reply: "this is the most useful copy review I've gotten in months." Total time spent: ~3 minutes for what would have been a 15-minute Loom video.
Wednesday — engineer handoff. Engineer asked "should the toast slide in from the right or the bottom?" I captured three different products' toast animations as stills, dropped arrows on the slide direction in each, and sent the comparison in 90 seconds. Decision made before lunch.
Friday — design review for a junior designer. Captured 6 of their frames, dropped step markers on each issue, added one-line text captions. Sent as a single doc-style review. They told me it was clearer than reading 6 separate Figma comments.
What DrawShot doesn't help with
To be honest about the boundaries:
- Live design collaboration. Figma's own tools are better for real-time coediting.
- Spec generation. Use Figma's inspect mode or a real handoff tool.
- Long-form design critique. A written review with embedded images is sometimes better than scattered captures.
DrawShot is the pipe between "design lives in Figma" and "feedback lives in conversations." It's useful when feedback needs to cross between the two.
Wrap
The 90-seconds-per-comment overhead I described at the top adds up to about an hour a week for me. DrawShot has cut it to maybe 15 minutes a week. That's 40+ hours a year of design-review time back.
The annotations are also better — more deliberate, more consistent, easier to read — because the friction is gone. When you don't have to budget 90 seconds for each annotated comment, you annotate the ones that matter and skip the throwaway "looks fine" comments.
If you do design reviews regularly: try DrawShot, free, no account.
— Shraddha
drawshot.dev · v1.0 · macOS 13+ · free