Custom Specs Format: Spacing Variables

[dlewand691]

Problem

The size and spacing of specs is too small and tight for my default font sizes.

Requested Solution

• Please add the ability to customize the spacing between items both vertically and horizontally.
• Figma variables would be a better solution.

Detailed requests

From Slack:

• Enable control of the opacity of artwork in exhibits
• Enable formatting of dashed vs solid lines

Likely Solution

Add second EightShapes Specs Layout variables collection consistent with the custom formatting feature, targeting all the necessary relevant variables applicable to item spacing and padding values across outputted sections, subsections, attributes and more.

[nathanacurtis]

@dlewand691 Good idea! I've thought about that, glad you put it in the backlog. Not sure of it's imminent priority but it is something I'd like to do and the path forward already has established patterns given how text and color can be customized.

[dlewand691]

@nathanacurtis Great! This would be a tremendous help.

[nathanacurtis]

Audit of existing padding and item-spacing throughout specs output.

Specs
this.frame.itemSpacing = 128;

Spec
frame.itemSpacing = 50;

Title

title.itemSpacing = 48;
title.paddingBottom = 64;
title.paddingLeft = 64;
title.paddingRight = 64;
title.paddingTop = 64;

Section

section.itemSpacing = 64;
section.paddingBottom = 64;
section.paddingLeft = 64;
section.paddingRight = 64;
section.paddingTop = 64;

Subsection
subsection.itemSpacing = 40;
subsectionTitleFrame.itemSpacing = 8;

SubsectionExhibits
exhibitLayouts.itemSpacing = 40;

ExhibitSpacers
spacer.paddingBottom = 0;

Table
tableFrame.itemSpacing = 16;

// Column header row
columnHeaderRow.itemSpacing = 32;

TableRow
rowFrame.itemSpacing = 32;

Element
if (format && format === 'TABLE')
frame.layoutMode = 'HORIZONTAL';
frame.itemSpacing = 32;
} else
frame.layoutMode = 'VERTICAL';
frame.itemSpacing = 8;
}

ElementName

// Name
frame.itemSpacing = 6;

Attributes
if (element.getPluginData('format') === 'TABLE')
attributes.layoutMode = 'HORIZONTAL';
attributes.itemSpacing = 0;
} else
attributes.layoutMode = 'VERTICAL';
attributes.itemSpacing = 4;
}

Attribute

// Layer : Attribute
frame.itemSpacing = 4;

// Layer: Attribute / ]-[
valueFrame.paddingBottom = 4;
valueFrame.paddingTop = 4;

case 'STYLE':
valueFrame.paddingLeft = 9;
valueFrame.paddingRight = 9;
valueFrame.itemSpacing = 6;

case 'VARIABLE':
valueFrame.paddingLeft = 6;
valueFrame.paddingBottom = 3.5;
valueFrame.paddingTop = 3.5;
valueFrame.paddingRight = 6;
valueFrame.itemSpacing = 4;

if (attribute.variableType() === 'COLOR')
  valueFrame.paddingLeft = 4;

case 'TOKENSTUDIO':
valueFrame.paddingLeft = 6;
valueFrame.paddingRight = 8;
valueFrame.itemSpacing = 6;

LinkedResourceList
resources.itemSpacing = 0;

Option
frame.itemSpacing = 8;
labelFrame.itemSpacing = 4;

Notice
  noticeFrame.itemSpacing = 4;

ArrangeSections
if (currentSettings.EXHIBIT_COLUMNS > 1)
anatomy.exhibit.frame.itemSpacing = 40;

[dlewand691]

Thanks for this. Looks like you're using an 8-pixel sizing system, which is great. Our system a 10-pixel based system. Is there an easy way to customize the base size? I was looking into whether Figma variables can use calculations or not. That's only possible in prototypes currently.

[nathanacurtis]

[nathanacurtis]

Moved dashed lines, underlaid opacity to #166

[nathanacurtis]

@dlewand691 Today, customizing spec layout with spacing variables launched. :)