Design + Sketch App — Medium | Alden Spence

Since we launched support for Sketch Libraries, we’ve seen widespread adoption by teams of all sizes. This new way of working with Sketch and Abstract has opened up many use cases worth exploring. In this article I’ll dive into some of our best practices to help you use Libraries and Linked Libraries in Abstract.

Libraries 101 — The Basics

A Library is an ordinary Sketch document with symbols that are used in other Sketch documents. If you want to use the same Library across multiple Abstract Projects, you can link a Library file from multiple Projects as a Linked Library. Symbols updated in your Linked Library will update instances of the Symbol across your team’s Projects.

Benefits of using Libraries in Abstract:

• Increase design consistency across Projects and Teams
• Reduce project-size and improve performance — in Sketch and Abstract
• Organize and view Libraries as individual files
• Update and Sync symbols across files in a Project
• Track and Commit changes made to each Symbol

Convert an existing file into a Sketch Library

1. Access your Files tab in a Project
2. Right click the file you’d like to use as a Library
3. Choose “Use as Library…”
4. Done 👏 Abstract automatically makes Libraries available in your project files, saving you time and confusion as you work on multiple projects throughout the day.

When you select “Use as Library…”, the Sketch icon for that file will turn from orange to pink and Abstract creates a commit to record the change. If you ever want to stop using a file as a Library file, you can go into the same menu and uncheck “Use as Library…” to reverse the process.

How to add Sketch Libraries to your Project

New Library File

1. Open up any Branch within an Abstract Project and select the Files tab
2. Select Add File
3. See “Create Sketch File as Library…” in the screenshot below
4. Done 👍

Access these options through the “Add File” button.

Existing Library File

1. Open up any Branch within an Abstract Project and select the Files tab
2. Select Add File
3. If you have already made a Library containing your design elements, click Import Sketch File as Library…
4. Select the correct file from your computer and click Import
5. Done 👍

Library File In Abstract

1. Open up any Branch within an Abstract Project and select the Files tab
2. Select Add File
3. If you have already made a Library containing your design elements in Abstract, click “Link Library…”
4. Select the Project your Library is located in
5. Select one or multiple Libraries and click “Link Libraries”

Once you link a Library to your Project, open your Sketch Files and follow Sketch’s Symbol Update Flow. When changes are made to the Library, You’ll have the option to update your symbols from Master via an alert in the top right. No more out of date symbols or design discrepancies. Crazy right?

Notice that little alert in the top right? ☝️

Using Libraries 201 — Organization and Multiple Projects

Now that we’ve covered the basics, lets dig a bit more into best practices. Each design team faces its own unique challenges and — as a disclaimer — it’s part of why I love working with design teams. My suggestions in this post are based on how we operate at Abstract and includes trends I’ve seen across other teams. With that in mind, there is no “best” way to use Libraries, and I hope these tips can guide you in your quest for Library enlightenment.

Common Questions

Q: How should I organize my Libraries? One large Sketch File, or a couple smaller ones? We have symbols in a library and sometimes just on a page on our Project, what should I do?

✅ Do: Structure your Libraries in a way that is intuitive for not only yourself but your team with clear naming conventions.

✅ Do: Separate Libraries from your working Files. Consider breaking up large Library files into multiple files. This provides your team with the option only to sync and add aspects of your Library that are relevant to their project. Not having to sync unnecessary components and files is a plus here.

🚫 Do Not: Create a massive Library called “Aldens_Symbols_VFinal3.sketch” containing out of date symbols and lacking structure your colleagues will understand.

Q: Where should my Library files live in Abstract? We have a couple Libraries, should you just keep them all within a single project or across a couple?

✅ Do: Create a Project for Libraries that change with low frequency. we recommend to group those libraries in a “Design Systems” Project so that they can be easily found, updated, and linked to. Check out the image below for a glimpse into how we’ve set up our Libraries.

✅ Do: Add libraries that are not applicable to other Project at the Project level alongside your other files. This works well if your team is separated by platform or project.

🚫 Do Not: Keep stray copies on your computer and send v_4_2018Components.sketch via slack or email to a team member. Remember the single source of truth concept? Sounds good right? Let’s practice that together. 😄

Design Systems Project

Above, you’ll see our Project, Design System. We use this Project to group Libraries with symbols used across our products. Most of these Libraries are linked to multiple projects and used across our design team to reduce variables and design discrepancies. As you can see, each library is its own file and organized in a way that’s easy to navigate for a new designer.

Q: What will I see in Sketch after I’ve linked my Libraries in Abstract? I’ve attached Libraries to my Project, can I really just use them now? Where can they be accessed?

Walkthrough:

After linking a library to a Project, click “Edit in Sketch” to create a Branch, or Open Untracked. Once in Sketch, access the Insert drop down in the Menu Bar. Your Library Symbols will be grouped and ready to be added where needed.

The Library File Name will be displayed along with where it’s linked from within Abstract. Organization of Library files and clear naming conventions are important. 👋

Q: Say I create a branch in a project with a linked library then commit changes. Can I specifically merge those library changes — so they update across all my projects — without merging changes from other files I made on that branch?”

When working in a Branch, we do not support merging of just Library changes. You’ll need to Merge the entire Branch. The thinking here is that changes made to a Linked Library can have a potentially large impact across multiple Projects/Files and should be done with a full Merge to Master.

Each team and project create unique scenarios for using Libraries. If you have additional questions about your team could use Libraries in Abstract, feel free to reach out to [email protected] or visit our Help Center for more info.

The Designer’s Guide to Libraries in Abstract was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.