How to set margins for text styles?

To create a consistent look I want to configure top (and bottom) margins for text styles. For example to set a margin above each header or list of items.

I can’t find the option where to set such properties.

You won’t be able to do this with styles alone (like you could do in InDesign) - it doesn’t work like that.

What you could do instead is wrap a portion of text in a container (auto-layout frame with vertical direction) and add top and bottom padding. You can then create a component out of that frame.

That would make it harder to find and adjust the properties that describe the resulting CSS, I think.

My solution is to add styles with names like space-y and set their font size to represent the spacing. Then insert empty lines with the correct style where needed.

It’s not good, but allows the use of normal text blocks.

BTW, never used InDesign. Did use Word, LibreOffice and CSS to define text styles.

I see where you coming from, that won’t be possible with the styles alone.

How about if you use a $spacing instance of a component together with Spacing manager plugin :arrow_upper_right:?

My solution works for now. I’m more interested in using Figma as part of site development, not only to create clickable screens.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.