Title of project

  1. 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.
  2. 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.
  3. 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.