Designing Paywalls in Figma

Best practices on designing a paywall in Figma for use in the Nami Paywall Creator

• Design within a 390x844 frame (iPhone 13 & 14)

• Use frames and auto layout

  • Auto layout vertical gap corresponds to Nami container spacing

• Always allow at least 40px space at the bottom of the paywall

• Avoid fixed width on components like buttons. These won't size well for different screens. Instead use Fit width with left and right padding

• Preview your paywall design in Figma by applying different phone frame sizes