Layout and spacing
You can annotate padding, item spacing and other layout attributes and detail values for each layer with Autolayout in a Layout and spacing section.
What it includes
The Layout and Spacing section includes:
Content that specifies relevant layout attributes
Visual annotations in artwork overlaid and adjacent to the relevant element layer
Relevant content includes:
Element name
Element Figma layer type (indicated by an icon)
Visual autolayout attributes, such as:
Layout directionLayout alignmentVertical resizing(such asFixed,HugandFill)Horizontal resizing(such asFixed,HugandFill)PaddingPadding leftPadding topPadding rightPadding bottomItem spacing(sometimes referred to as "gap")
Relevant visual annotations include:
Element overlay (blue)
Padding overlay (green)
Item spacing overlay (orange)
Padding markers
Item spacing markers
Layout direction icon (pointer to the right or down)
Layout alignment icon (3x3 grid with cell filled to identify alignment, such as "top right")
Vertical, horizontal and wrapped vertical
AutospacingResizing markers, denoting
Fill,FixedorHug
How it works
The plugin traverses the item to find any layer configured with Figma autolayout to create an exhibit for that layer.
FAQs
Can I choose to simplify annotations to not include so much "marker junk" on the periphery?
Not all users value markers for attributes like resizing, alignment and direction. A request for a setting to hide these markings is in the backlog.
Can I hide the less important visual annotations for direction, alignment and resizing?
Yes. Because some customers and their stakeholders (such as developers to which they handoff) don't prefer including these annotations, there's a setting to "Hide outer layout annotations" that omits markers for direction, alignment and resizing.