Plugins for Managing Alignment
Duplicating content or group of elements is easy, however managing the spacing and alignment for the new elements added to that group, is not. With multiple level of sections, each duplication requires manual intervention to move around other element. This can be annoying, and waste a lot of designer’s time.
The Stacking feature in Anima Plugin allow the user to define a group of vertical or horizontal elements (called Stacks) and define the spacing between those components. Once the stack is set, the elements in and surrounding the stack auto-adapt to any changes. In addition, if you duplicate an item within a stack or a sub-stack within a stack (nested stacks), components will auto-arrange themselves to accommodate new items in the stack maintaining a consistent spacing. This will save you a lot of time and effort arranging elements.
Changing the height and width of a background component each time I change the inner content is noise to me. This is particularly painful when I am working with buttons. The Anima-Padding helps resolve this problem of static element size and introduces adaptive elements.
The Padding feature in Anima Plugin allow the user to specify the top, bottom, right and left padding for inner content for a component or section. This means that the element size will dynamically adapt to the changing content size. In the above example you can see that once we setup padding for the button text (4.5px for top-bottom and 20px for right-left), the button adapts to the user entered content size automatically. This feature is powerful when used with symbols.
The alignment options in Sketch work great for shapes and images, but with text layers, the alignment is based on the bounding box of the text. This makes it difficult for the designers to align text elements with different sized fonts or line height.
The BaseAlign plugin for Sketch will help you vertical align text boxes by their baseline, instead of the bounding box around the text. This will fetch you perfect vertical alignment no matter what the font size is at one click.
Note: The plugin has three alignment options — top, middle and bottom; However, only bottom (baseline) works for me.