figma guide
Designing product reviews and Q&A UI in Figma: ratings, filters, and submission flows
Design star ratings, review lists, photo uploads, Q&A threads, and verified-buyer submission flows in Figma with component variants and Dev Mode specs for ecommerce PDP teams.
- Published
- Updated
- Jun 29, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
Product reviews and Q&A are two modules on the PDP: a ratings summary with filterable review list, and a separate questions thread with ask-and-answer flows. The summary block shows average stars, histogram, and total count above the fold on product detail pages. Reviews support sort, star filter, verified badge, helpful votes, and photo gallery. Q&A is question-first—each row shows the question, best answer, and “See all answers.” Submission uses modal or drawer forms with star input, title, body, optional photos, and verified-purchase gating. Reuse rating star components everywhere; do not duplicate star SVGs. Start from the Figma guides hub and templates pillar.
Who this is for
- Product designers on DTC and marketplace PDPs where social proof drives conversion.
- Design system teams unifying stars, review cards, and moderation states across categories.
- Engineers integrating review platforms (Yotpo, Bazaarvoice, native) with syndication, photos, and Q&A APIs.
Reviews vs Q&A: when to use which
| Module | User intent | Primary action |
|---|---|---|
| Reviews | ”Did buyers like it?” | Read experiences; filter by rating |
| Q&A | ”Will this fit my need?” | Ask pre-purchase questions |
| Both on PDP | Full social proof | Reviews below gallery; Q&A adjacent or tabbed |
Verdict: keep reviews and Q&A as separate components—mixing them in one list confuses sort logic and SEO schema.
ReviewsSummary block
| Element | Spec | Notes |
|---|---|---|
| Average score | Large number + stars | e.g. “4.6” |
| Total count | ”Based on 128 reviews” | Link jumps to list |
| Histogram | 5 rows, bar + count | Click filters list |
| Recommend % | Optional | ”92% would recommend” |
| Write review CTA | Primary or secondary button | Opens submission modal |
ReviewsSummary
├── Variant: density=compact | full
├── Property: average=4.6
├── Property: totalCount=128
└── Layers:
├── ScoreBlock
├── StarDisplay
├── Histogram
├── RecommendLine (optional)
└── WriteReviewButtonPlace after buy box or in a dedicated Reviews tab. Mobile: stack score above histogram; do not hide the write CTA.
ReviewList controls
| Control | Options | Behavior |
|---|---|---|
| Sort | Most recent, highest, lowest, helpful | Dropdown or segmented control |
| Filter by stars | 5★ only, 4★+, etc. | From histogram click |
| Search reviews | Keyword | Optional on long-tail SKUs |
| With photos | Toggle chip | Reuse filter chips |
| Pagination | Load more or pagination | Prefer load more on mobile |
ReviewListToolbar
├── Variant: layout=inline | stacked
└── Layers:
├── SortDropdown
├── FilterChips
├── SearchInput (optional)
└── ResultsCountEmpty filter state: “No reviews match these filters” with clear-filters link—not a blank page.
ReviewCard anatomy
| Part | Spec | Notes |
|---|---|---|
| Star row | 1–5 filled stars | Match rating component |
| Title | Short headline | Bold, one line |
| Body | Expandable after 3 lines | ”Read more” toggle |
| Author line | Name + date | ”Sarah M. · Verified Buyer · Jan 2026” |
| Verified badge | Check + label | Only when purchase verified |
| Variant tags | Size, color purchased | Chips from order data |
| Photo strip | Thumbnails → lightbox | Reuse gallery patterns |
| Helpful row | ”Helpful? Yes · No” + count | Toggle, not duplicate submit |
| Report link | Text link | Opens moderation flow |
ReviewCard
├── Variant: density=standard | compact
├── Variant: hasPhotos=true | false
├── Property: rating=5
├── Property: verified=true
└── Layers:
├── StarRow
├── Title
├── Body
├── AuthorMeta
├── VariantTags
├── PhotoStrip
└── HelpfulRowUse Auto Layout with 12–16px vertical rhythm. Marketplace designs add seller response as indented sub-card below body.
WriteReviewModal flow
| Step | Fields | Validation |
|---|---|---|
| 1. Rating | Interactive 5-star input | Required |
| 2. Title | Single line | Min length |
| 3. Review body | Textarea | Min/max chars |
| 4. Photos | Up to 5 uploads | Optional; show upload UI |
| 5. Recommend | Yes/No radio | Optional NPS-style |
| 6. Submit | Primary CTA | Success toast |
WriteReviewModal
├── Variant: state=form | submitting | success | error | unverified
└── Layers:
├── StarInput
├── TitleField
├── BodyField
├── PhotoUpload
├── RecommendGroup
├── SubmitButton
└── LegalLine ("Reviews may be moderated")Unverified state: user not logged in or no purchase—show Sign in to review or Buy this product to review with link to PDP. Never show a dead submit button.
Q&A section layout
| Element | Purpose |
|---|---|
| Section header | ”Questions & answers” + count |
| Ask question CTA | Opens ask modal |
| Search questions | Filter existing |
| QuestionRow | Question, author, date, answer preview |
| See all answers | Expands thread or modal |
| Official answer badge | Brand or seller response |
QASection
├── Layers:
├── Header + AskButton
├── SearchInput (optional)
└── QuestionList
└── QuestionRow × nEach QuestionRow:
QuestionRow
├── Property: answerCount=3
├── Property: hasOfficialAnswer=true
└── Layers:
├── QuestionText
├── MetaLine
├── BestAnswerPreview
├── OfficialBadge (optional)
└── SeeAllAnswersLinkQ&A sits well below reviews or in a PDP tab with reviews. Pre-purchase users scan Q&A before size guides on complex SKUs.
AskQuestionModal
| Field | Required | Notes |
|---|---|---|
| Question | Yes | Textarea, 500 char max typical |
| Email notify | Opt-in checkbox | When answered |
| Nickname | Optional | If guest allowed |
| Submit | Primary | Moderation queue message |
Success state: “Thanks—we’ll email you when answered” with link back to PDP. Duplicate detection may show “Similar question exists” with links—design that branch.
Photo reviews and lightbox
| State | UI |
|---|---|
| Thumbnail in card | 64px square, rounded |
| Strip on summary | ”Customer photos” carousel |
| Lightbox | Full image + link to source review |
| Upload preview | In modal before submit |
| Rejected photo | Inline error in upload zone |
Align aspect ratio tokens with product gallery but allow user-generated mixed ratios. Annotate max file size and count for engineering.
Moderation and empty states
| State | Copy pattern |
|---|---|
| No reviews yet | ”Be the first to review” + CTA |
| No questions | ”Ask the first question” |
| Pending moderation | ”Your review is being checked” |
| Rejected | Policy link + edit resubmit |
| Syndicated reviews | ”Reviews from our retail partners” label |
Use empty state patterns with illustration optional—CTA matters more than art.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Star input a11y | Keyboard 1–5; labels for screen readers |
| Verified buyer rule | Order ID match, time window |
| Sort/filter query params | Deep-linkable review filters |
| Helpful vote | One vote per user; optimistic UI |
| Photo CDN URLs | Thumbnail vs full |
| Q&A notification | Email trigger on answer |
| Schema | AggregateRating markup fields |
| Analytics | review_summary_view, write_review_start, review_submit, qa_ask, review_filter |
| Localization | Date format, RTL star direction |
Use Dev Mode checklist and form states for submission modals.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Stars only in summary, text stars in cards | Inconsistent rendering | One StarDisplay component |
| Reviews and Q&A in one sortable list | Wrong mental model | Separate modules |
| Write review without auth check | Failed submits | unverified modal state |
| No histogram interaction | Missed filter affordance | Bars are clickable |
| Helpful as form submit | Duplicate reviews | Toggle votes only |
| Hidden Q&A on mobile | Lost pre-purchase answers | Tab or accordion, not removed |
| Photo lightbox without review context | Trust gap | Show reviewer + date in overlay |
| Fake review dates in designs | Misleading stakeholders | Use relative date tokens |
Recommended workflow
- Audit existing star rating components—extend, do not fork.
- Build
ReviewsSummary,ReviewCard, andReviewListToolbarwith filter and empty states. - Design
WriteReviewModalincluding photo upload and unverified branches. - Add
QASection,QuestionRow, andAskQuestionModalon PDP template. - Compose mobile tab or accordion if PDP is long—pair with sticky add to cart anchor links.
- Document verification rules, moderation, and schema fields in Dev Mode.
FAQ
Tabs vs long scroll for reviews?
Long scroll with anchor link from summary works for SEO; tabs reduce scroll on mobile—pick one per brand and stay consistent.
Show reviews on PLP cards?
Show average + count only—never full review text on cards.
Merchant replies in reviews?
Add SellerResponse sub-card indented 16px with “Response from [Brand]” label.
Syndicated vs native reviews?
Badge source when mixing—do not imply all are from your site.
Star half-points?
Display 4.6 as stars + number—half-star SVG optional; number is source of truth for a11y.
Next steps
- Design rating stars and review UI in Figma — shared star components
- Design product detail pages in Figma — reviews block placement
- Design product listing and grid UI in Figma — PLP star summary
- Design forms in Figma — submission field states
- Design empty states in Figma — zero-review PDP
§ Keep reading