Creating hierarchy in your Kits

Use Sections and Headings to organize your design language inside a Kit

Edward Boatman avatar
Written by Edward Boatman
Updated over a week ago

Inside a Kit you can create two levels of hierarchy using Sections and Headings. How you structure your Kits using Sections and Headings will affect how others interpret your design language and how easy it is for others to find assets in your Kit, so it's important to put some thought into it. 

First let's talk about the differences between Sections and Headings. 

Sections

Sections are displayed in the Kit Navigator and are self contained meaning you can not scroll to another Section of a Kit but rather have to select it in the Navigator. Only the Section in focus will show as unfurled in the Navigator. 

Headings

Headings are contained inside a Section and also display in the Navigator but they are not self contained, meaning you can scroll between multiple Headings inside a Section.  

Creating Section and Headings

Creating Sections and Headings is a breeze. To create a new Section simply select "+ Section" in the Navigator. To create a Heading inside a Section simply drag the Heading icon from the Insert Panel and drop it where you would like it to appear.

Pro Tip: You can also create a Heading by selecting the assets you would like to appear under the Heading and then right clicking > Group Items.

Section and Heading best practices

Sections

Sections should be used when there are different types of assets inside a single Kit and you want to create a clear distinction between the different types of assets or components. 

For example in Lingo's Brand Kit we have a Section for Logos and another Section for Colors because these are different types of assets. There is such a clear distinction between these asset types users are likely to know which Section they will need to select in order to locate the asset. 

Headings

Headings should be used when you want to create additional hierarchy within a Section. 

For example within the Color section you may want to specify that some colors are more important that others and should be used more frequently. In order to accomplish this you can insert Headings to designate which colors are "Primary" and which colors are "Secondary".

Did this answer your question?