Figma Pricing

Figma Pricing Component

The Pricing component displays available pricing plans for your products and services. Pricing cards consist of a price tag, a features list, and a primary 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.

Download Pricing Examples for Free

Copy to Figma