Advanced Tips with the Clarity UI Library

Red Dolan
Red Dolan
Sep 11, 2017 · 4 min read

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


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


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.

Clarity Design System

Clarity is an open source design system that brings…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store