Advanced Tips with the Clarity UI Library

With the previous article on what UI library are and why they are valuable, we wanted to follow up with some advanced tips using our UI template (UI kit). We have incorporated several different advanced override methods you can use to speed the process of building prototypes. So, let’s take a look.

Note: These tips are for use in Sketch

Overrides

When you select a symbol, the Inspector panel on the left will change to show an Override section. Overrides allow you to change the text on a symbol or swap a nested symbol to another symbol. Overrides keep you from having to do the dreaded “Detach from Symbol.”

Click a symbol to show Overrides panel

We renamed all symbol layers to simple-yet-descriptive labels. In some instances where there are many nested symbols, we indicated order by prefixing them with a number. This made it quicker to find that exact layer you are looking for.

Symbol Swap

The Overrides panel can also quickly swap symbols like icons in many places. The dropdown will show which different symbols you can switch to. We spent quite a bit of time thinking about which symbols you might want to switch around and which ones wouldn’t make as much sense. This way, you don’t have a dig through a bunch of symbols in the dropdown just to find what you are looking for.

Note: you can swap your own symbols in, like a new icon for instance. Just make sure the dimensions of your symbol match the symbol being swapped.

Style Swap

You can change the style of symbols like buttons from solid to outline. Or change the color of a button from primary-blue to danger-red. We have indicated those instances with helpful labels in the Overrides section. We even extended this behavior to many components, for example, vertical navigation. So now you can swap styles like open/closed and selected states.

Placeholder Swap

If you have need for an input placeholder, we have made it easy to do with an override. Just add a space in the “input” override and the input text will disappear. Then you can add your placeholder text in the “placeholder” override and your placeholder state will appear.

Add a space to remove symbol text

Resize

Sometimes all you need for your prototype is to change the dimensions of a symbol so it will fit your solution. We have spent a bunch of time redesigning the components in such a way to easily resize without the need to detach.

An example of this useful resize update is to our Buttons

1. Type in your button text into the override
2. Drag the left or right resizing handles on the button symbol
3. This adds equal margins to the left or right of your text
4. You will have to eyeball the margins though as it won’t be a perfect match to Button design spec

Add text and drag a resizing handle

Combinations of Each

In many cases you can use the power of many advanced actions without having to do the dreaded “Detach from Symbol”. An example is with the Checkbox or Radio.

1. Override the label with your text
2. Resize the component to fit your space
3. Override the unselected state to selected
4. Or even switch a checkbox to a radio

Override text, resize, and then swap symbols

These advanced tips should dramatically increase the speed of prototyping. If you have alternative ideas, please drop us a comment.

Download our latest Sketch design resources: UI Library and Icon Library

You can also follow Clarity on Twitter, star us on Github, or visit our website.