figma guide
Designing rating stars and review UI in Figma: patterns, states, and handoff
Design star ratings, half-stars, review cards, and interactive score input in Figma with accessible states, variants, and Dev Mode specs for ecommerce and SaaS.
- Published
- Updated
- Jun 16, 2026
- Read time
- 6 min
- Level
- Beginner
Quick answer
Rating UI spans read-only display (4.2 ★ average), interactive input (tap to score), and full review cards (avatar, title, body, date)—model each as separate components with shared Star primitives and consistent size tokens (sm/md/lg). Build Star with fill=empty | half | full and state=default | hover | focus | disabled; wrap five stars in RatingDisplay (read-only) and RatingInput (editable). Support half-star display even if input is whole-star only, and document precision in Dev Mode. Pair with cards, avatars, and forms. Start from the Figma guides hub.
Who this is for
- Product designers shipping ecommerce PDPs, marketplaces, app store listings, and SaaS review modules.
- Design system teams aligning star icons, numeric scores, and review list density across surfaces.
- Engineers implementing
role="img"summaries, keyboard-selectable inputs, and half-star rounding rules.
Rating UI types
| Type | Interactive? | Typical placement | Component |
|---|---|---|---|
| Aggregate display | No | Product header, search results | RatingDisplay |
| User input | Yes | Post-purchase, feedback forms | RatingInput |
| Review card | Partial (helpful vote) | Review lists | ReviewCard |
| Compact badge | No | Table cells, cards | RatingBadge |
| Distribution bar | No | Review summary sidebar | RatingHistogram |
Verdict: never merge read-only and editable into one ambiguous component—engineers bind different events and ARIA roles.
Star primitive anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Star icon | Visual unit | SVG or icon font; 16/20/24px sizes |
| Fill layer | Empty / half / full | Mask or overlaid half polygon |
| Gap | Space between stars | 2–4px; include in row width |
| Label (optional) | Numeric score | 4.2 beside stars |
| Count (optional) | Review volume | (128) muted text |
Star
├── Variant: fill=empty | half | full
├── Variant: size=sm | md | lg
├── Variant: state=default | hover | focus | disabled
└── Layer: Icon (vector)
RatingDisplay
├── Property: value (0–5, step 0.5)
├── Property: showValue (boolean)
├── Property: showCount (boolean)
└── Layer: Row of 5 Star instances (bound)Use boolean operations or masks for crisp half-star fills at export—see export guide for SVG handoff.
Display vs input behavior
| Aspect | RatingDisplay | RatingInput |
|---|---|---|
| Role | img with aria-label | radiogroup or slider |
| Value | Rounded for display | User-selected |
| Half stars | Show 4.5 as 4 full + 1 half | Often whole stars only |
| Hover | None | Preview fill up to cursor |
| Focus | N/A | One star focusable or group |
| Disabled | Gray stars | disabled on group |
Document rounding: e.g. 4.26 → 4.3 display, or 4.2 (128 reviews) with one decimal. Mismatch between stars and number erodes trust.
Size tokens
| Token | Star px | Use case |
|---|---|---|
sm | 14–16 | Tables, dense lists |
md | 18–20 | Product cards, review cards |
lg | 24–28 | Hero PDP, feedback form |
Keep the same star shape across sizes—scale proportionally; do not swap icon sets per size.
RatingInput states
| State | Visual | Notes |
|---|---|---|
| Empty | All stars outline | Prompt: “Rate your experience” |
| Hover preview | Fill up to hovered star | Document if hover clears on mouse leave |
| Selected | Solid fill to chosen value | Persist after click |
| Focus | Ring on focused star | Keyboard: arrows adjust |
| Error | Border on group + message | ”Select a rating” on submit |
| Disabled | Muted, no pointer | Read-only submitted review |
Prototype with interactive components swapping fill variants on hover—note production uses real input events.
Review card structure
| Part | Purpose | Spec tip |
|---|---|---|
| Avatar | Reviewer identity | Avatar component sm |
| Name + date | Trust | Verified badge optional |
| Rating row | Score for this review | RatingDisplay md |
| Title | Headline | Optional one line |
| Body | Review text | Line clamp 3 with “Read more” |
| Actions | Helpful, report | Ghost buttons; not star row |
ReviewCard
├── Variant: expanded=off | on
├── Layer: Header (avatar + meta)
├── Layer: RatingDisplay
├── Layer: Title
├── Layer: Body
└── Layer: ActionsUse auto layout vertical stacks; 16px padding; separate cards with 1px border or shadow from effects tokens.
Rating histogram (summary block)
Show distribution beside average score:
| Row | Content |
|---|---|
| 5 ★ | Bar 72% width |
| 4 ★ | Bar 18% |
| … | … |
Each row: label 5, thin progress bar, percent optional. Clicking a row filters the review list—document filter behavior in prototype notes or search/filter UI.
Accessibility requirements
| Requirement | Display | Input |
|---|---|---|
| Text alternative | aria-label="4.2 out of 5 stars" | aria-label="Rate 1 to 5 stars" |
| Color | Do not use color alone | Same |
| Contrast | Star fill vs background ≥ 3:1 | Focus ring visible |
| Keyboard | N/A | Arrows or 1–5 keys |
| Error | N/A | Announce in form error pattern |
Run accessibility plugins on yellow star fills against white—they often fail contrast; use darker gold or add outline stars.
Handoff to engineering
| Deliverable | Display | Input | Review card |
|---|---|---|---|
value | number 0–5 | number | per-review score |
precision | 0.1 or 0.5 | 1 or 0.5 | — |
reviewCount | number optional | — | — |
onChange | — | (value) => void | — |
readOnly | true | false | true for listed reviews |
size | sm | md | lg | same | md typical |
locale | decimal separator | — | date format |
Publish Patterns / Feedback in your team library. Link Dev Mode checklist for semantic color tokens on verified badges.
Real-world examples
Product detail header
4.6 numeric + md stars + (2,341 reviews) link scrolling to review section. Half-star visible; count is link style text/link.
Post-checkout feedback
lg RatingInput, required, error on empty submit. Optional textarea below at 3 stars or below—document conditional reveal.
Marketplace seller card
sm RatingBadge inline: ★ 4.8 (120) in card footer—no histogram on card; full stats on seller profile.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Stars without numeric score | Ambiguous precision | Show 4.2 or label |
| Input looks like display | Users do not click | Hover + cursor pointer |
| 6-star scale by accident | Broken math | Exactly 5 unless locale exception |
| Half star on input, none in spec | Dev ships whole only | Document step |
| Review card without date | Low trust | Always show date |
| Yellow stars on white | Contrast fail | Darker fill or stroke |
| Same component for edit + read | Wrong ARIA | Split Display vs Input |
| Average does not match bars | Credibility loss | Align histogram math |
FAQ
Half stars for input or display only?
Display almost always supports halves; input is often whole stars unless you prototype half-click zones—call out explicitly.
Stars or emoji?
Icons scale and theme consistently; emoji render differently per OS—avoid for design systems.
Show zero reviews?
Show empty stars + “No reviews yet” instead of 0.0—pair with empty states on the list.
Rating next to badges?
Verified purchase is a badge beside the name, not inside the star row—keeps scan line clean.
Bottom line
Split rating into star primitives, read-only display, interactive input, and review cards so each surface gets the right behavior and accessibility contract. Document rounding, half-star rules, and hover preview in Dev Mode—small mismatches between stars and numbers undermine user trust fast. Continue with cards, forms, tables, and the tutorials hub.
§ Keep reading