CRAFT LIBRARY PLUGIN
The Craft Library plugin lets you generate a custom style guide inside of Sketch, including color palette, fonts, text styles, and custom elements. It also allows you to sync and share any layer/group/artboard within Sketch 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 syncing 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.
To begin creating a new library from a local folder or cloud drive:
- Open Craft plugin and click the Library icon on the right.
- Click the Shared tab.
- Click Create New.
- 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.
- 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.
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 creating a new one.
To import an existing library:
- Open Craft Manager and click the Library icon on the right.
- Click the Shared tab.
- Click Import Library.
- Locate your folder 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:
- Open the Craft Library plugin in Sketch.
- Click the File icon at the top right of your plugin modal.
- Click Create New.
- Click Import Library.
- Click the iOS 10 GUI folder.
- 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. You can also lock categories to prevent them from being accidentally deleted. Lock a category by clicking the Edit icon (the pencil icon), and then clicking the lock icon to the right of any category. When locked, categories cannot be renamed or deleted. Be sure to click the Edit icon again once you're done editing your 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:
- 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.
- Click + Add Category.
- Enter the name of your new category.
- Click Add Category button.
Edit your category and item names by clicking the edit tool and updating the text. You can also click the edit tool to rearrange your category items as needed, though it’s not currently possible to rearrange the categories.
If you have a layer, group, or symbol that you'll re-use, you can add it to your library by selecting the element and then clicking an empty spot in the Library grid. To add an entire artboard, click on the name of the artboard, then click in the Library pane.
If you've made changes to a previously synced item 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 import those changes. Updates to a Library are always live; when adding or removing an item to or from a Library, the updates are instantly seen in your Library folder. If using a sync service with Library, these changes will automatically be applied as they are made.
To update an existing item in your library:
- Select the element you want to update in the library.
- Open the Library pane in the Craft bar.
- Click the sync icon next to the item thumbnail. If you’re viewing your library pane in grid mode, you’ll see the sync button on the bottom left of your item.
The thumbnail updates to reflect the changed version of the element. Once the version in the library has been synced, other documents using elements from the same library will be able to be easily updated whenever the Library is updated.
When a user clicks the sync icon to accept the updates from a shared library, the updates will push to the library and all elements in any artboard on the current page. Updates will not be pushed to all pages in the Sketch doc; each page would need to be updated individually by clicking the sync icon.
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.
- Select the elements you want to group and add them to your library by clicking empty spots in the Library grid.
- From the grid, group the elements by dragging and dropping them on top of one of the elements, which will create a stack icon.
- To add new elements to your stack, expand the stack and drag items into the expanded grid. To add an existing item into 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.
To remove an item from a library:
- Click the edit icon in the upper right corner of the Library pane and an X will appear in the upper right corner of each element in the library.
- Click that X for each element you wish to delete from the library.
- 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.
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:
- Click the Document tab in the Library pane.
- Click on a category to view your style guide.
- Hover over a specific category and click + Add to shared.
- When you click back to the Shared tab, you’ll see that your categories have been auto-filled.
You’re able to switch between multiple saved libraries. To view a different library:
- Click the file icon at the top of your Library pane.
- Click the Choose Library drop-down menu and select your other library.
You can also create a new library from this menu.