Need to organize and add documentation to your Sketch components? This article will help you build a library for your Sketch components that you can share with your team and keep up to date. To get started, you’ll need to download the Lingo Sketch Plugin.
We’ll cover the following areas in this article:
Structuring your UI component library
Assembling your UI component library
Structuring your component library
Organizing your component library is an important part of maintaining an efficient workflow. It makes finding and using components easier for you as well as your team members.
Inside a Kit there are two layers of hierarchy that you can use to structure and organize your assets: Sections and Headings.
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. Sections are created, deleted and renamed in the Kit Navigator on the left.
Headings are nested inside a Section and also display in the Navigator but they are not self contained, meaning you can scroll between Headings inside a Section. To insert a Heading, drag the Heading item from the insert panel and drop it where you want it to display in the gallery.
What Sections should I include?
The sections of a component library can vary depending on the size and type of components that it contains. Below is a common structure we see in component libraries in Lingo.
Foundations
Typography
Colors
Spacing
Buttons
Primary Buttons
Secondary Buttons
Controls
Checkboxes
Radio Buttons
Switches
Dialogs
Alert Dialog
Confirmation Dialog
Input Fields
Textfield
Textarea
Lists
Single-line
Multi-line
Navigation
Navigation elements
Notifications
Banner
Snackbar
Assembling your component library
Now that you have an idea of how to structure your component library, let’s dive into putting it together. As mentioned before, you’ll need the Lingo Sketch Plugin. Once you download it, open the Sketch document that contains all your components. Then open the plugin from the plugins menu. You’ll be asked to sign into your Lingo account.
Adding your Sketch assets to Lingo
You can do this one of two ways with the plugin: automatically or manually.
Automatically
The plugin detects all the symbols, text styles and layer styles in your Sketch file. With the press of a button, all of those can be added to Lingo automatically.
Open the plugin by going to Plugins > Lingo
Select the Kit you want to add all your Sketch components to
Without selecting anything, use the button at the bottom right corner and click on ‘push all symbols’ or ‘push all styles’
Note: You can only add symbols, text styles and layer styles to Lingo
Manually
If you just need to add a handful of symbols to Lingo, you can do so manually. This approach only works for symbols, or anything you can ‘select’ in Sketch. You can do this one of two ways:
Select the symbols in Sketch and simply copy/paste them into Lingo
Select the symbols in Sketch, open the plugin and use the button in the bottom right corner. The button will show a count of the symbols you have selected.
Next steps!
We hope this article provided you the information you need to build your component library. If you want to learn more about assembling your asset library you can read these help center articles or get in touch with a team member by using the chat window below.