×

Craft - Introduction to the Library plugin

The Craft Library plugin lets you generate a custom style guide inside of Sketch, including color palette, fonts, and text styles. Push changes to any symbols in your shared library as well as share symbols, text, and color styles with your coworkers, helping keep your library of assets and UI kit synced together. If you share the Library via Dropbox or another shared folder, Craft will even notify you when new updates to your assets are available in the cloud, and pulling down changes only takes a single click.

 

 

To get started, you can create a new library or import a library from a public file or a previous project. Your library can be located in any folder accessible in OS X including networked drives, sync folders for Dropbox, Box, Google Drive, etc. If using a sync/shared location, other users can import the same Library to keep things in sync.

Creating a new library

To begin creating a new library from a local folder or cloud drive:

  1. Open Craft Manager and click the Library icon on the right.
    32940436.png
  2. Click the Shared tab.
  3. Click Create New.
  4. Enter your new library name and click the ••• button next to Choose Destination to browse for the location of the folder where you want to store your library. Your new library can be located in any folder accessible in OS X including networked drives, sync folders for Dropbox, Box, Google Drive, etc. If using a sync/shared location, other users can import the same Library to keep things in sync.
  5. Click Create Library.

If you’ve chosen to create a new library, skip the Importing a Library section below to continue creating your new library.

Importing a library

If you've already created a Library previously or are using a Library that's been shared with you over a networked drive or a sync service like Dropbox, then you'll want to import an existing Library rather than create a new one.

Note: Your team will need to be on the same version of Craft Library. See these steps that showcase the differences in Library versions and how to update your Library items.

To import an existing library:

  1. Open Craft and click the Library icon on the right.
  2. Click the Shared tab. 
  3. Click Import Library.
  4. Locate your file and click Open.

You can also download and use Facebook’s iOS 10 GUI kit to quickly get started designing an app. The free kit, downloadable as a Craft Library ZIP file, gives you access to hundreds of key iOS components and elements. Once installed, the assets are easily searchable within Library, and they’re completely compatible with all of Craft’s plugins.

To get started with Facebook’s iOS 10 GUI kit, update your Craft Manager and download the new Facebook Craft Library ZIP file by following these instructions:

 
  1. Open the Craft Library plugin in Sketch.
  2. Click the File icon at the top right of your plugin modal.
  3. Click Create New.
  4. Click Import Library.
  5. Click the iOS 10 GUI folder.
  6. Click the iOS 10 iPhone.Library file, then click Open to install the file.

Once the file is installed, you can access all of Facebook’s assets right from Craft in Sketch by dragging and dropping elements into your design:

Categories in Library

Once you've created your library, you'll see categories you can start using right away, or you can create your own.

CREATING AND EDITING CATEGORIES

You can add categories to your Library to help keep it organized. Categories can be whatever you like, but examples might include Buttons, Modals, or Icons.

To create a category:

  1. Click the dropdown above the grid of Library items. By default, this should say "All Categories" but will display the name of the category you're viewing if you've selected a category.
  2. Click Create New Category.
  3. Enter the name of your new category.
  4. Select the type of items you’ll be adding (Symbol, Color, Text Styles).
  5. Click Create Category.

Edit your category and item names by clicking the edit tool within the same window and updating the text. Click the trash can icon to delete a category, or click the lock icon to lock/unlock a category. Locking a category prevents the ability to delete the category or items within. You can also click and drag with the hamburger icon to rearrange your categories as needed. To reorder your category items, click and drag anywhere within the item list.

1.gif

Adding an item to your library

If you have a symbol that you'll re-use, you can add it to your library by selecting the symbol and then click an empty spot in the Library grid.

Note: A layer or group must be a symbol in order for the item to be added to your Library. To learn how to import your old library file that contain layers and groups, see these steps.


2.gif

To add a color, click on the + button in the colors category.  A color picker appears to either click the color or add a hex value to your Library.

3.gif

PREVIEWING AN ITEM IN YOUR LIBRARY

If you'd like to see a larger view of your Library symbols, hover over the thumbnail image to reveal a more detailed view. Change the background color of the image preview to transparent (grid), dark, or light for better visibility.

74135957.png

Updating an item in your library

If you've made changes to a previously synced symbol in your Sketch document (such as the color of a button), you can push those changes to your library so that others using the library can pull down those changes.

Note: If your team is using Library version 1.0.5 or older, Library items that were added as layers or groups will need to be re-added from Library into your Sketch document once you've updated to a newer version of Library. See these steps that showcase the differences in Library versions and how to update your Library items.

To update an existing item in your library:

  1. Select the symbol(s) you want to update in the library.
  2. Open the Library panel.
  3. Click the Push Changes button at the bottom left of the Library panel.

The thumbnail updates to reflect the changed version of the symbol. Once the version in the library has been synced, other documents using symbols from the same library will be able to be easily updated whenever the Library is updated. 

Click the sync icon to accept individual updates or click the Pull changes button to pull down all updates from a shared library. The updates will be pulled down to the library and all symbols in the Sketch document.

Grouping items in your library

Save space in your libraries and group together various states of library items by dragging and dropping the items on top of each other. Once grouped, you’ll be able to view the items as a stack.

  1. Select the elements you want to group and add them to your library by clicking empty spots in the Library grid.
  2. From the grid, group the elements by dragging and dropping them on top of one of the elements, which will create a stack icon.
    4.gif
  3. To add new elements to your stack, expand the stack and drag items into the expanded grid.  To add an existing item to your group, you need to drag the existing item onto the stack icon.

Ungroup items by expanding your group and dragging items back to their individual spots in your library grid.

Removing an item from your library

To remove an item from a library:

  1. Click the edit icon  in the lower right corner of the Library panel and an X will appear in the upper right corner of each element in the library.
  2. Click that X for each element you wish to delete from the library.
    5.gif

You'll have to re-add the element if you want to resume using it later. This may sever the pre-existing link in other Sketch files which used the original element and may not update.

Importing items from your document

Instead of manually adding and categorizing colors, fonts, and text styles to your library, you can import them from your document.

To import colors and text styles:

  1. Click the Document tab in the Library pane.
  2. Click on a category to view your style guide.
  3. Hover over a specific category and click + Add to shared.
    64250167.png
  4. When you click back to the Shared tab, you’ll see that your categories have been auto-filled.

Switching between libraries

You’re able to switch between multiple saved libraries. To view a different library:

    1. Click the file icon at the top of the Library panel.
    2. Click the Choose Library drop-down menu and select another library. You can also create a new library from this menu.

DELETE AND LOCATE LIBRARIES

6.gif

To delete a library:

  1. Click the file icon at the top of the Library panel.
  2. Hover over the library name and click the trash can icon.

 

To find a library file’s location:

  1. Click the file icon at the top of the Library panel.
  2. Hover over the library name and click the folder icon to open a Finder window with the library folder highlighted.

 

Frequently Asked Questions

DOES LIBRARY HAVE KEYBOARD SHORTCUTS?

Pressing Shift+Control+L” will open Library and focus on the search box so you can search for Library items easily.

WHY DON'T ANY OF MY LIBRARY ITEMS APPEAR AFTER I IMPORTED A LIBRARY?

When browsing for the Library to import, be sure you've selected the folder that ends with .library and not the contents of that folder. If you select that folder, your Library contents should load correctly. If you select a folder or item within that folder, the contents of the Library may appear blank.

This will also occur if the library is created in the new version of Library and then opened in an older version of Library. New versions of libraries are not compatible with Library version 1.0.5 and lower. Please be sure your team updates to the most current version of Craft Library.

WHY WON'T ANY OF MY LIBRARY ITEMS SYNC AFTER I UPDATED CRAFT LIBRARY?

If your team is using Library version 1.0.5 or older, Library items will need to be reimported once updated to a newer version. See these steps that showcase the differences in Library versions and how to update your Library items.

IS CRAFT LIBRARY COMPATIBLE WITH VERSIONING TOOLS LIKE GIT AND BITBUCKET?

At this time, Library is not compatible with versioning tools. Please contact us if you'd like to request compatibility.

WHY AM I NOT ABLE TO SYNC  COLOR AND TEXT ITEMS IN MY LIBRARY TO ALL ASSOCIATED INSTANCES IN MY SKETCH DOCUMENT?

Colors and text styles can still be added to a shared Craft Library to keep your styles in one place, but updates can only be synced between your Sketch document and Library when using symbols. Syncing only symbols as components allows us to bulk sync updates from the symbols in your Sketch artboards to Library.