3 simple features to improve symbol management in sketch

I’ve been working a lot on design systems recently. One of the biggest things when building a design system is creating responsive and easily editable symbols that still constrain to the requirements of the style guide.

I’ve gathered the top three items I’ve found that could improve productivity greatly in sketch if added. (to avoid using plugins for basic needs)

1. Grouping of symbols

The biggest issue when it comes to symbols (and text styles) is grouping. When creating an icon library, all the icons are usually created with the same canvas sizes. Due to the way symbols are grouped today, if one of your team members designs a UI using your symbol and wants to change the icon, they have to find the icon over in a menu of each icon.

Proposed solution

If there is a simple way to name your symbols — for example, “(navigation) clock,” where the word in parenthesis creates a group, and within your symbol you can select limit group, this would force designers to select icons from only the navigation icons in the overrides.

group into “form interactions”

2. Responsive containers

When designing a style guide with buttons, the biggest thing is retaining the padding requirements. For example, a button that originally has left and right padding of 15px may require manual resizing due to the lenght of text they have in the button.

Button with custom label, requires manual resizing

Proposed Solution

When creating a symbol if the button background masks everything else, then the button would auto resize based on the restraints and original spacing.

Using resizing restraints to keep the limits of the text

Mask the background to make it “obey” resizing restraints

With something as simple as this — and perhaps even a checkbox under resizing for the bg layer that says:

☑️ Retain padding of masked items

This will not only allow users to mask and enforce padding, but with multi-level masks (using folders) you could make some really complex responsive UI without any plugins.

Bonus points: Sketch Allowing masks with text layers and imported symbol layers!

3. Typography restraints

This is not necessarily specific to symbols, but adding the options that CSS has for text transform: Uppercase each word, Only start of sentence. (we already have all caps available and all lowercase)

Using these in symbols would help a great deal in consistency across mockups for sentence stylization.

I would love to hear what you think, or troubles/techniques you may have run across to improve your sketch experience!

The post 3 simple features to improve symbol management in sketch appeared first on Crypto Currency Online.

source https://cryptocurrencyonline.co/3-simple-features-to-improve-symbol-management-in-sketch/