-
Asset Library Overview
- What is an Asset Library?: An asset library is an organized collection of digital
assets such as vectors, images, color palettes, fonts, and available resources.
- What is a Style Guide?: A style guide specifies when, where, how, why, and which
assets to use in which circumstances
- Why Sketch for your asset library and style guide?: It provides certain advantages
over a file and folder system, which can get pretty messy if not under control. Some of
those advantages are: You only need one Sketch file for your assets, multiple export
options, a bunch of available plugins, demo and preview options including an app on your
phone that would access your file, style guide and documentation together with assets.
Easier to update and maintain.
- Who will use your asset library and style guide?: There are three main categories of
an audience: Designers, Developers, Stakeholders, Design team.
- Getting set up: Aggregating and organizing: The best way to be organized, is to
imagine how you would want it to be organized. There really isn't a specific pattern to
learn. But if you want to put a Photoshop or Illustrator file into your Sketch file, then
you should have its file path above it so you can find it easier.
-
Creating an Asset Library in Sketch
- Overview: Create your asset library in Sketch: To create your library it is as easy
as making a file (it actually is!)
- Importing and creating assets: You can import assets into your document from a
different source or you can create your own assets from scratch.
- Naming your assets: If you have any groups or assets that that have a default name
that doesn't seperate it from other things, then you should change the name to something
that would make a lot more sense to what it contains or is.
- Fonts and color palettes: Sketch doesn't import new fonts into its workflow, but it
uses the default system fonts. If you want to add more fonts you would have to install them
to your computer. If you want to add colors to a color palette, you can just save an image,
and go to View > Show colors then in the dialog box, then find the gear or circle with three
dots, and go to New from File, then select your image/whatever else you saved.
- Documenting specifications for your style guide: Try to leave enough space for you to
place documentation objects, in your style guide.
-
Sharing Your Asset Library
- Services and plugins: A very useful tool to use with Sketch is Zeplin. It is basically a program/app that generates a
style guide from your design. A couple others are Marvel
and Flinto.
- Publishing your style guide to Zeplin: Just simply select the artboards from your
document click on Plugins > Zeplin > Export Selected. Once they have been exported (will
have to make a new project if new), then go through your pages and save all of your styles
to the style guide.
- Maintianing your style guide: To maintain/update your style guide, just do the whole
export thing again, but it will save your previous selections. You can also add notes, by
clicking on a page, then near the bottom click on the notes button hold down the cmd key,
and
click where you want the note to be.
- Sharing your asset library: On Zeplin, you can invite people to participate in your
style guide,
or use the web app link. In Sketch, you can click the collaborate button and share it with
the Sketch cloud. You can also use Dropbox or Google Drive to share files.
- Preview and demo options for Sketch: Sketch has a few preview and demo tools inside
of it, along with a few plugins that you
could get, like Flinto.
- Create an interactive preview or demo in Flinto Lite: Use Flinto Lite to create
animation for your pages, and enable links so you can travel between them.