Clarity design system UI kit for Figma

I’ve created a UI kit to cover all your prototyping tasks.

Sergey Durnov
Sep 6, 2018 · 9 min read

👀 Preview in Figma

Clarity UI kit for Figma is a powerful alternative to a very basic free template, provided by Clarity team.

Original template is a nice thing to have, but it’s clearly not powerful and accurate enough for everyday hardcore prototyping.

Also, this is a great web prototyping Figma kit in general. Clean and elegant, it is a real alternative to Google’s Material design, Bootstrap, and other popular design systems.

Light and Dark theme March 2019 update is available, which brings Clarity 1.1.0 changes and tons of enhancements.

This is a premium product and it is worth every cent. And here is why.

  • 900+ components with variations, hover/disabled states and examples, covering almost all stable Clarity components. Check out a full list of components further in this article ⬇⬇⬇⬇⬇
  • Full Clarity color palette and typography sections added with 230+ color and text styles
  • Templates and examples components included
  • 1 free video call tutorial
Figma styles set up and applied to all components

Built in a clever way

Components are separated into multiple pages and grouped inside each category, to provide the best navigation and best Instance menu experience. Many component and categories use emoji in their names to help you locate them faster.

The worst thing in UI prototyping — is when you’re being constantly interrupted by the lack of some building block, component state, reusable template, or by a necessity to measure sizes and spacing while positioning components.

To help you avoid that, I’ve made components very flexible, added many different states and variations of each component, added examples, which will help you to start quickly by re-using prepared templates.

Multicomponent — is a component, that contains a list of similar elements — drop-down items, table rows, calendar days, and so on, all placed with proper margins/paddings. Just place a multicomponent on your design board, customize items through instance menu and by editing text — and you are good to go!

Also, you can detach from multicomponent and keep working with base components if you need to customize it deeper.

Before and After. From Tree View multicomponent to this, just by switching instances and editing text

Constructor — is a set of prepared component’s parts, which you need to customize slightly, put them together and group into a frame. Constructors often contains multicomponents. For example, Datagrid can be assembled by taking background part, adding a few columns parts (which are multicomponents for Datagrid cells), footer part, and grouping everything together into a single frame.

Using the power of Constructor and multicomponent you can save time when creating complex objects

This UI kit is huge, but you will always find something to add for your specific workflows.

Don’t hesitate to add more variations and prepared templates, restructure and rename components as you wish. Do everything that will help you to perform better.

Share your ideas in our Spectrum community.

Free updates

I’m offering lifetime free updates and fixes to this version of UI kit.

Here is what I’m planning to add soon:

  • ✅ New forms components. Will include new inputs, radio buttons, select, password input, text area components — all with states and validation messages, for vertical and horizontal layouts. (upd. — released in v1.2, improved in March 2019 update)
  • ✅ Further components structure improvements (upd. — released in March 2019 update)
  • ✅ More typographic options (upd. — released in March 2019 update)
  • Stack view component with constructor
  • ✅ Sidenav component (upd. — released in v1.3)

And here is what I’m considering for the near future:

  • ✅ Advanced Forms constructor — a set of presets and building blocks with recommended paddings/margins to boost forms prototyping (upd. — some elements released in v1.2, updated in March 2019 update)
  • ✅ Mobile navigation components (upd. — released in March 2019 update)
  • Layout presets for typical use cases
  • ✅ More examples of all components (upd. — released in March 2019 update)
  • ✅ Dark theme — work in progress (upd. — released in March 2019)

Track updates, leave feedback and share your designs in our group in Spectrum chat, send an email, add me in Telegram (@sergey_durnov) or on Twitter.

Installation guide

  • Get your Figma account. For the best experience, obtain a subscription with Team Library support.
  • Download desktop app (or use web version together with Figma Font Installer). Figma works under Windows, Mac or directly in your browser.
  • Download and install Metropolis font (it’s free and open-source). Make sure you did that, otherwise you won’t be able to edit text in components, and some components may look broken, as Figma will use a fallback font.
  • Get 🛒Clarity UI kit for Figma through my Gumroad store. After performing a payment, you’ll be able to download .FIG file with a design system.
  • Option 1: Import downloaded file into Figma
  • Publish a design system to Team Library (optional) to make it available in all Figma projects. Check the components panel to make sure all components were added to the library.
  • Option 2: request read-only access to our Figma project (contact us using any provided option) and use components directly from our Team Library. When we publish changes to our Team Library, you will get a notification and you’ll be able to decide if you want to apply this update to a particular file or not.

Usage notes

  • If you add a copy of an example component into your project and detach instance — all child instances will be broken, as this is how Figma handles this. Workaround: select and copy all layers in an example component, paste them into your project and wrap into a frame. This will keep all constraints and properties of layers and will keep all nested instances connected.
  • Due to Figma limitations, some components can’t be 100% responsive. Don’t be afraid to detach instances of components with nested instances and customize its content as you need.

Video tutorials — coming soon!

Light Theme
Dark Theme

Components overview

For use in base components only. To get all Clarity icons, import Sketch template, provided by Clarity team, into a separate Library.

Use logo component to add your logo into the Header Nav component, as well as other components, which may use your company/product logo.

Use Tips components to leave notes for other designers or UI developers

Full Clarity color palette, just for reference. All listed colors are available as Figma styles.

All paragraphs, links, and header styles are packed into text components for standalone use. All internal text elements are available as styles and in some cases as text components.

Simple alerts in multiple variations and mobile versions.

App-level alert constructor with multiple examples and mobile version

All possible Clarity button variants

Cards are presented in 2 options. Simple cards can be used for very lite or very hard customization. Cards Constructor can speed up card assembly by providing flexible and easy-to-use building blocks.

Clarity checkboxes in various states, bundled with 3 groups of form layouts templates for faster prototyping.

Date picker constructor allows you to quickly assemble Date Picker for any year and month. Just copy weeks from multicomponent, put them onto a Base component, and wrap into a Frame.

Date input is an override of a text input component and can be easily used inside 3 form layout groups of text input components.

Drop a few columns on a background, add a footer, pack into a Frame — this is all you need to get a Datagrid component.

Quickly assemble desktop and mobile navigation using Header and Subnav constructors.

Clarity text inputs in various states, bundled with 3 groups of form layouts templates for faster prototyping. Text input can be changed to Date input via Figma “Instance” menu.

Clarity Modal template together with the backdrop and 2 examples.

Clarity password inputs in various states, bundled with 3 groups of form layouts templates for faster prototyping.

Clarity radio inputs in various states, bundled with 3 groups of form layouts templates for faster prototyping.

Clarity select inputs in various states, bundled with 3 groups of form layouts templates for faster prototyping.

Clarity Signpost component in all directions.

Similar to Datagrid constructor, Table constructor allows you to assemble a table by putting together several columns templates.

Clarity Textareas in various states, bundled with 3 groups of form layouts templates for faster prototyping.

Treeview is available in 4 types — simple, with icons, with checkboxes and with icons+checkboxes.

You can quickly build any tree view by switching instances (up to 6 levels of hierarchy)

Vertical nav items in various states + few example templates to build a vertical nav in seconds.

Wizard constructor allows you to build any set of steps and place any content in a content area.

Thanks for reading! Join our group in Spectrum chat, send an email, add me in Telegram (@sergey_durnov) or on Twitter.

Have a good time with Clarity UI kit and don’t forget to share your experience! Best regards, Sergey.

Sergey Durnov

Written by

Clarity UI kit for Figma

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade