Build a responsive pricing card as a reusable component

Build a responsive pricing card as a reusable component

Build a pricing card using Figma's Auto Layout and Component Variants — not static boxes

and copy-pasted duplicates.

1. Create a frame named PricingCard, 320×400, using Auto Layout (vertical), with specific padding (e.g. 24px all sides) and item spacing (e.g. 16px).
2. Inside it, add: a plan-name text, a price text, a 3-item feature list (each item its own Auto Layout row with a checkmark icon + label), and a CTA button.
3. Turn the button into a Component with three Variants: Default, Hover, and Disabled — each with a distinct fill/text color, all part of one component set.
4. Set each PricingCard's resizing so it flexes inside the row: horizontal resizing = Fill container, vertical = Hug contents. (In an all–Auto Layout design there is no separate "Constraints" panel — the Fill / Hug / Fixed dropdowns next to W/H are the equivalent.)
5. Duplicate the card twice into a horizontal Auto Layout row named PricingRow (Basic / Pro / Enterprise) — each card should swap in a *different variant* of the *same* button component, not an independently-styled copy.
6. Name every layer sensibly — no "Rectangle 14" or "Frame 82" left in the tree.