This is a bit different to how I’m used to working in Sketch, but seems like it could be useful within Inspect mode when sharing spacing specs between design and engineering. In order to make sure that proper is maintained throughout the component, spacing had to live within each nested symbol within it. When using overrides to collapse elements in a symbol using Smart Layout, working with spacing is a bit tricky.Smart layouts feel like a layer on top of group resizing, and combining the two together can create some pretty versatile symbols. In order to make truly complex smart layouts, you need to be pretty comfortable with both nesting and resizing in symbols.With a little finagling and some foresight, you can create some fairly flexible components using smart layouts! Takeaways By setting the overall symbol’s layout to horizontal and left to right, whenever the text changed, the symbol container would resize to fit the text. When creating this simple button symbol, I set the text alignment to auto width and gave it a margin of 16px all around to allow the text layer to grow along with the content within the text override. To represent different button states, we’ll just rely on Sketch’s text styles and layer styles. To get a hang of how Smart Layout works, I started with a simple button with the following layers: I wanted to take this new feature for a test drive to find ways that my workflow could be improved with Smart Layout.

It’s incredibly powerful and we can’t wait to see how it’ll improve your workflow. Better still, you can set different Smart Layout settings for Nested Symbols and even groups within Symbols. With it, you can set a direction for Symbols to resize when you change their overrides, while keeping the spacing between different layers in that Symbol consistent. With Smart Layout, we’re making Symbols more powerful and supercharging your workflow when it comes to using them in your designs. On September 17, 2019, Sketch 58 was released and included a major efficiency boost for designers working with symbols. Creating simple and complex symbols using Sketch’s latest feature.

Adjust content on resize sketch