Pricing
Pricing
Preview Frames X UI Kit
Pricing
in Figma
Figma Pricing Component
The Pricing component displays available pricing plans for your products and services. Pricing cards consist of a price tag, a list of features, and a CTA button.
You can customize the content of the pricing card by updating the nested variants (base elements) and component properties. By stacking pricing cards together, you can create comprehensive and responsive Pricing page layouts.
Pricing Cards UI Best Practices
Use variants to draw attention to the recommended plan. Ensure the recommended option stands out but doesn’t overshadow the other options;
Avoid too many options, as it can lead to decision paralysis. Offer 3-4 pricing tiers to cater to different user segments;
If possible, include a free trial or demo to reduce the bounce rate and build a list of future customers.