UX Playbook

Hike One ID library

The library is maintained by Suzanne Wensveen and everything around it is communicated inside our slack channel #hikeone-id-library.

If you’re not familiar with sketch libraries, please read about [sketch libraries](sketch-libraries) first.

What’s included?

The library consists of a large collection of wireframing elements, built as resizable symbols:

How to use?

  1. Sync the folder that contains the library
  2. Add the ID library to Sketch
  3. Use the symbols in a new Sketch document

Step 1: Sync the dropbox folder that contains the library

The ID library is a shared library and it is located in our dropbox folder. Sync this folder to use the library and to receive the updates:
hike-one_design / 01_templates / sketch / Sketch-libraries / Hike One ID Library

Alternatively you can download a version here:

Hike One ID Library (Build 49) Hike One ID Textstyles (Build 49)

Step 2: Add the IDLibrary to yourSketch

Goto Sketch / preferences, and open the “Libraries” tab. Click the “Add Library…” button. Find the library in the path specified above, and click on “Open"

The Hike One ID Library should now be in your list of libraries, and have a checkmark to indicate it’s active. You can check the time & date of the latest update here as well.

Step 3: Run the ID Library in a new Sketch document


Select the elements you want to use via the Symbols menu drilldown. This gives you a preview of the elements you can use. When you’re used to the library (contents) I strongly recommend using the Runner plugin. Open it with Cmd+', and set the default to the ‘insert’ functionality to speed up the process\

FAQ

How do I get library updates?

The library will be updated via the default Sketch library update process. Check the notifications in the top right hand corner of Sketch to see new updates:
\

Release notes will be available through the library slack channel: #hikeone-id-library\

Will the elements resize automatically?

Short Answer: No
Long answer: The elements were designed to be resizable (in most cases in horizontal direction), but will not resize automatically with your content. If needed, an overflow mechanism is built into the element to ensure content does not run ‘out of’ the element. If you’ve changed the size of the elements, and the size of that element is changed in the library, Sketch will keep the sizing as set by you in your file, and override the library element dimensions. If needed, you might need to reset the element to original size by hand.

How do I change the state of a symbol?

By default, the elements in the library are set up so that the states of the elements are clustered. This means that a different state can be easily be selected through the symbol drop-down.

\

Can I add my own symbol to the library?

Short Answer: No
Long Answer: You can request a new element via the Slack channel. If approved, it will be added to the backlog. To ensure library quality and consistency however, it’s best to keep one person in charge of the content of the library.

Is my project suitable for using the library?

Suitability depends very much on the requirements of the project you’re in:

ID library is suitable for:

ID Library is not suitable for: