Referral Programs UX Kit

To help you get started with referral marketing, we've prepared a ready UI kit for referral programs.

Before you start

You need to have a Figma account to use the UI Kit. You can set up a free account by clicking this link.

Referral program UI kit

With this UI Kit, you can leverage best practices for running effective referral programs that we have collected in our Referral Programs UX Guide

Download Referral Programs UI Kit on Figma


  1. What’s included in the kit?
  2. How to use the kit?

What's included in the kit?

  • Editable library of components
  • Several referral widgets
  • Customer cockpit views with milestones
  • Referral code input fields
  • Referral sharing views


Accelerate time to market with a dynamic library of  over 50 fully-customizable components, including customer profile UI elements and referral milestones progress bars. 

Referral components

Referral widgets

If you want to get as many referrals as possible, you should make it easy to join and participate in your program. Require potential referrers only to fill out basic information, like their name and email address. Do not include too many extra questions or options you don’t really need to run your program. This will help you convert interested customers into advocates better.

Referral invite widget

Referral cockpit view

If you allow for multiple referrals and offer rewards for each referral, it would be very useful for the referrers to see their progress. You can also allow them to send a reminder to their friends who have not redeemed the reward yet. This way, you let them manage their referrals and avoid confusion on the status of their referrals.

Referral cockpit view

Checkout & cart views

If you already have an effective cart flow UX ready, adding referral program components on top should not take long. You can use the same coupon code input box to accept referral codes or split them into two separate boxes. If you need help designing a better promotion experience at the checkout, take a look at our Ecommerce Coupons and Promotions UI Kit

Referral checkout view

How to use the kit?

To download and customize the kit, follow the steps below:

  1. Go to the Figma Community to find Voucherify or follow this link.
  2. Click Duplicate to open the kit in your Figma account.
  3. Jump between pages and export single components or whole screens to use in your project. Remember that all elements are open for customization.

Download referral kit

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us