Spacing Token help

its seems the spacing token in penpot seems to affect only the spacing between the flex board elements, is there a way to make it affect just the flex board padding?

I did apply the token to the flex board elements, and it seems to add a margin to and between the elements. the only way to keep the margin from being applied between elements was to group them which made it still work or look like flex board paddings.

anyway, i would appreciate any help towards the initial question.

1 Like

You can apply spacing tokens to the following properties of elements with flex layouts:

  • gaps
  • padding

For elements inside flex layouts (“flex items”), you can apply spacing tokens to the margin property.

If you right-click the token (with the element selected) then you’ll see the available properties where you can apply that token:

This is the demo file I used in the video above:
Spacing tokens in Flex layouts.penpot (18.5 KB)

1 Like

again Thanks laura!..

1 Like

I think it would be very helpful to have a clickable icon next to the spacing value in the right-hand panel that allows you to select the token from the Spacing list.

I had the same problem, and the right-click options are really well hidden (I missed them).