All Collections
Getting started
Creating a UI components library
Creating a UI components library

A guide on how to build a UI components library in Lingo

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

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.

Did this answer your question?