Product Review UI Design in Figma | Modern Product Reviews Page | Figma Tutorial
Product Review UI Design in Figma, Modern Product Reviews Page, Figma Tutorial.
In this video I will show you product reviews ui design in figma, fgma tutorial.
Here's a step-by-step guide to designing a Product Reviews UI in Figma, ideal for an e-commerce or product page. This is great for both beginners and intermediate designers.
Design a clean and functional Product Reviews Section UI in Figma that includes:
• Overall rating
• Star ratings
• Individual user reviews
• Filters (e.g. most helpful, newest, etc.)
• Review submission button
Tools Needed:
• Figma
• (Web or Desktop App)
• Optional: Google Fonts (like Inter or Roboto)
Step-by-Step Tutorial:
Step 1: Create a New Frame
• Open Figma → New Design File.
• Press A to insert a frame. Choose a size like Desktop (1440 x 1024).
Step 2: Set Up the Layout Grid
• With the frame selected, go to the right panel → Layout Grid → Add Grid → Change it to Columns.
• Set to 12 columns, 20px gutter, margin 120px or as per your layout style.
Step 3: Add the Section Title
Use the T tool and type:
• Customer Reviews
• Set font size to 24px, font weight Bold (use Inter, Roboto, or Poppins).
• Align left.
Step 4: Add the Overall Rating
• Create a container on the left (around 300px width).
• Inside, add:
• Big rating text: 4.5
• 5 Star icons (use Plugins like “Material Symbols” or copy from Icon libraries)
• Small text: “Based on 1,245 reviews”
Step 5: Star Rating Breakdown
Add bars showing rating distribution:
Rating → Bar → Count
5 Stars ████████ 800
4 Stars █████ 250
3 Stars ███ 120
2 Stars ██ 50
1 Star █ 25
• Use Auto Layout for better alignment.
• Use light gray bars with colored fill.
Step 6: Review Filter Bar
Top right area:
Dropdowns or tabs:
• Most Recent
• Most Helpful
• Highest Rating
• Lowest Rating
Step 7: Individual Reviews Card Design
• Create a card (around 600px width):
• Reviewer Name + Avatar
• Star Rating (use icons)
• Date of review
• Review Text (e.g., “I love this product…”)
• Optional: Thumbs up/down for helpful votes
• Use Auto Layout vertically
• Make 3-4 of these cards stacked with spacing (e.g., 24px).
Step 8: Add “Write a Review” CTA
Bottom of the section:
• Button: “Write a Review”
• Use a primary color and rounded corners.
Extra Touches:
• Add hover effects using variants.
• Add pagination or “Load more reviews” button.
• Use consistent spacing (8pt system is ideal).
• Use shadows for cards for depth.
Optional: Use Figma Components & Styles
• Make Review Card a component
• Use Text Styles for headings, body, small text
This Video Also Includes: Product Review UI Figma, Product Reviews UI Design, Product Review Design Figma, Figma Product Review UI, Product Review Page Figma, Review Section UI Design, E Commerce UI Figma, Product Page UI Design, Figma Website UI Design, Modern UI Design Figma, Figma UI Design Tutorial, Figma Web Design Tutorial, Figma Product Page, Rating UI Design, Review Card UI Figma, Figma Auto Layout, Figma Components, UI UX Design Figma, Figma Tutorial, Figma Design Tutorial, UI Design Tutorial and more.
You Can Check Also MY Figma Tutorials Below:
Figma Tutorial | Figma Tutorial for Beginners and Advanced:
• UI UX Design with Figma | Figma Tutorial f...
Watch More At:
/ @gdalam602
Order me on Fiverr:
https://www.fiverr.com/mdnurealam602
Get (A-Z) Alphabetical Logo & Other Logos and Design Elements from Here:
https://www.shutterstock.com/en/g/Nur...
#Figma #UIDesign #ProductReview #UIUXDesign #FigmaTutorial #WebDesign #EcommerceUI #ProductDesign #UIDesignTutorial #FigmaDesign