×

Library

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.

 

 

Getting Started

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:

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

Categories

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__1_.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 after checking for conflicts.

Library Conflicts

What is a conflict?

Conflicts occur in Library when both team members make simultaneous changes to the same component in a shared Library and the Library file is located in a remote shared folder, like Dropbox. If you’re updating a component in the Library and your collaborator tries to update the same component at the same time, the hosting service may not be able to merge these changes automatically causing a conflict.

Why do conflicts occur?

During Library synchronization, a file conflict occurs when a library symbol and/or text style has changed in both the source and target locations since the last sync. This makes it hard for Craft to determine which version should be left unchanged and which version should be updated, and can result in corrupted .library files.

How do I address these conflicts?

Craft makes handling file conflicts in Library easy by creating a copy of your remote library on your hard drive. When you choose to update your Library to Dropbox or another remote location, Craft first checks the remote version of your library items and compares it to your local version of the library. If any conflicts are found that cannot be solved automatically, you’ll be prompted to choose the correct version of the component before completing the sync:

50476328.png

This system of checks locks the remote library until all the files are uploaded so that your team can stay up to date without any lost work. Learn more about how Library handles conflicts here  

 

Note: Make sure your entire team is running the most recent version of Craft Library. If you’re still having trouble with conflicts, let us know.

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.

Libraray Management

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.

The first time you use the document tab, you’ll need to click Create Styles. This creates a separate styles page within your Sketch file where InVision automatically detects colors, fonts, and text styles from your Sketch document. Once you’ve created the Styles page, you can add those colors or text styles to your shared Library.

The Document tab also allows you to propagate updates to many screens from the Styles page. If you change an element on the Styles page, then click Sync Styles, you’ll see the changes update throughout all pages in your Sketch document.

If you have multiple shades of a color that InVision has detected in your Styles page, you can consolidate those colors into a single color by changing the color of the swatch to ensure the hex values match. Be sure you change the color of the swatch rather than just updating the hex value underneath the thumbnail as changing the label won’t do anything. The next time you click Sync Styles, Craft Library merges all the detected color swatches and reduces the number of colors in your Styles page. The same behavior applies to fonts and text styles.

As you add new colors, fonts or text styles to your screens, Craft adds those to the Styles page each time you click Sync Styles.

To import colors and text styles to your shared Library:

  1. Click the Document tab in the Library pane.
  2. Click Sync Styles to add all elements for the first time, or click it again to update all elements after they have been added from your document.
  3. Click on a category to view your style guide.
  4. Hover over a specific category and click + Add to shared.

30631628.png

When you click back to the Shared tab, you’ll see that your categories have been auto-filled. The colors and text styles added from the Document tab will show in Library in the Document Colors and Document Text Styles categories. (Note: If anything changes in your Styles page, you’ll need to re-add them to your shared library. It won’t auto-sync changes to your shared library.)

Updating items from your document

Instead of manually updating colors, fonts, and text styles in your artboards, you can update these elements throughout your Sketch document using the Document tab in Craft Library.

To update colors and text styles:

  1. Click the Symbol you’d like to change in the Styles page. Find the element and make the color and/or text style change.
  2. Click the Document tab in the Library pane.
  3. Click Sync Styles to update your symbols. The changes will appear in your style guide, and on every page that contains the synced style.
  4. Click on a category to view your style guide.
  5. Hover over a specific category and click + Add to shared.
  6. When you click back to the Shared tab, you’ll see that your categories have been auto-filled.

7970820.png

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

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.

6.gif 

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.