7.6 Padding (padding)

This topic provides information on Padding (padding)

CSS Equivalent:

padding, padding-top, padding-right, etc.

Figma Concept:

Space inside the container pushing children inward.

How to Set in Figma:

  1. Select the Auto Layout frame
  2. Use Padding Around Items in the Auto Layout section
  3. Options:
    1. Uniform padding → One value (e.g. padding: 16px;)
    2. Vertical & Horizontal padding→ Use “Alignment & padding” icon
    3. Individual sides → Use “Independent paddings” icon for full control

Note:

Please ensure that you use padding variable instead of explicit value.

Figure 7-8 Padding (padding)


Description of Figure 7-8 follows
Description of "Figure 7-8 Padding (padding)"

Parent topic: Auto Layout to Flexbox Mapping