Custom Specs Format: Spacing Variables

dlewand691 commented 6 months ago

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 commented 6 months ago

@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 commented 6 months ago

@nathanacurtis Great! This would be a tremendous help.

nathanacurtis commented 6 months ago

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 commented 6 months ago

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 commented 4 months ago

Moved dashed lines, underlaid opacity to #166

nathanacurtis commented 4 months ago

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

DirectedEdges / specs-plugin