Smart layout

[milg15]

• TODO: DESCRIPTION

We should handle smart layout on symbols that overflow.

Smart Layout works on symbols where the Layout property it's not None. The user can choose from the following layout properties :

Vertical:

• Top to Bottom Vertical
• Bottom to Top Vertical
• From Middle Vertical

Horizontal:

• Left to Right Horizontal
• Right to Left Horizontal
• From Center Vertical

The Symbol Source will have a new Icon on the Layer List when a new layout property is selected.

Cases

Override Text

When you apply Smart Layout properties to a Symbol with text layers, you’ll need to make sure they’re set to either auto height (for vertical layouts) or auto width (for horizontal layouts).

[email protected]

Add shrink instances button in overrides panel inspector.
https://user-images.githubusercontent.com/16924758/132747201-cd235550-22ee-40f1-b3e2-c45316b45a53.mp4

Minimum Smart Layout Dimensions

Allow users to select the minimum width or height the symbol must keep.

[email protected]

Reference:

• Smart Layout - Sketch
• Auto Layout - Figma