Smart Layout enables you to visualize different states or content within a single nested symbol and supercharges your existing design system by eliminating the need of having different nested symbols for each state by reusing them.
Building a design system from scratch is a mammoth task but crucial to the design, scale, and ship quality products. Before Smart Layout coming into play, every layout has to be an individual nested symbol to achieve the expected results. Smart Layout resolves this and reduces the number of nested symbols in a design system to a greater extent.
Using Smart Layout was pretty simple and straight forward. I tried creating a card with different layouts.
In this card layout, I set the text alignment to auto width and to resize the card vertically, I chose Vertical Layout and Top to Bottom. That’s it! I can feed in the content of different lengths and re-use this card for different purposes.
Here there are two different cards, one with user persona type card and the other like an article preview card. Both share a common parent nested symbol yet can adopt different layouts.
Versatile UI components
With this smart layout, we can greatly reduce the number of UI components used in a design system. You can combine the components into a single nested symbol with the help of smart layout. Also, not that the smart layout works with hidden symbols as well.
Remember fewer symbols names
It’s always hard to identify the symbols with the smaller previews in Sketch. Remembering the symbol names can speed up your workflow. With Smart Layouts you just got to remember fewer symbols and do wonders.
Keeps components consistent
Symbols are ideally used to reuse them in different places and also to keep them consistent. With the help smart layout, we can ensure that all visualized states are made consistent as well. This truly strengthens the purpose of having a design system.
Better Performing Sketch
Whenever I try opening my mammoth design system sketch file, it will always slow down my machine because of that huge list of nested symbols within that sketch file. Now with the smart layout, fewer nested symbols result in better performance.