Design library that provides Apple PencilKit UI resources. Supports Sketch, Figma, and InVision Studio.
Current Version: 6.0
The primary component of the PencilKit UI is the Toolpicker that appears at the botton of the canvas (by default). The ToolPicker can also be dragged, in which it transitions to a circle containing the currently-selected tool, or minimized to a slightly smaller circle. Dragging allows the Toolpicker to be docked onto the side of the screen in a vertical position.
This library contains four primary symbols: Horizontal Toolpicker, vertical Toolpicker, minimized Toolpicker, and and in-motion Toolpicker. Each is implemented in light- and dark-mode. The library also includes overrides for the Toolpicker, tool popup menus, and an Apple Notes-like navigation bar.
Areas of the Toolpicker are:
- Control Buttons: Undo, Redo, and More. Library provides enabled and disabled states for light- and dark-mode.
- Tools: Pen, Marker, Pencil, Eraser, Selection, and Ruler. Library provides selected and deselected states for light- and dark-mode. Drawing tools also provide a text override for opacity.
- Toolpicker Palettes: Color palette with six buttons with overrides for color and selected state. The buttons are universal (light- and dark-mode use the same symbol). Text palette with four butons for inserting a table, opening the keyboard, formatting font, and inserting a carriage return.
Apple added a new color picker control for iOS 14 that includes options of a grid, spectrum or RGB sliders.
This version of the library is also the first to support the iPhone markup toolpicker. Unlike the iPad Toolpicker, the iPhone version should not be scaled for different screen sizes. For curved-screen phones (iPhone X Pro, Xs, 11, etc.), use the "Large Screen" and "Curved Screen Footer", for iPhone 8/8 Plus use the "Large Screen" symbol; streching the symbols horizontally to fit the screen width. For the iPhoneSE use the "iPhone SE" symbol.
iPadOS 14 added a new tool - the Text tool - to the toolpicker. PencilKit Design Library has been updated to include the new tool. In iPadOS, when you select the Text tool, the color palette is also replaced with a new set of tools. The pallet has been made a nested, overridable symbol so that your design prototypes can quickly be updated to reflect selection of the Text Tool. Like the previous Toolpicker symbols, the new iPadOS14 toolpickers shouldl be scaled depending on screen size. See the table below for details.
One of the buttons in the new Text Pallet is Font Format, which opens a new popup. Like the previous popups, this should NOT be scaled for different screen sizes.
While it's not new in iPadOS 14, we have added a new symbol to the library: The navigation bar Apple's Notes app. It is available in Light and Dark modes. Please note, it should NOT be scaled for the different screen sizes. Simply adjust the width to fit the screen.
In iPadOS, there is always one tool selected in the toolpicker by default. It is only possible to select one tool at a time. If a drawing tool is selected (pen, marker, pencil), then the corresponding color should be selected. In version 3.0 and later, the Pen, Marker, and Pencil tools have overrides that allow customization of tip color and size.
If your prototype includes a marked-up canvas, the Undo button override should be set to the enabled symbol. The More button should typically always be enabled.
For the in-motion and minimized states, the tool should match the selected tool in the maximized Toolpicker. The mimimized and in-motion symmbols should alway use the "Selected" tool symbols.
Depending on device, Toolpickers (Horizontal, Vertical, Minimized, In-Motion) need to be scaled to match the screen size of the device. All symbols were created for an 11" iPad Pro. If you are using this device as a reference, there is no need to scale any symbols. For all other devices, you will need to insert the necessary Toolpicker symbol, then choose Scale from the Sketch toolbar. Use the percentage from the following table to scale the Toolpicker symbol to the correct size for the device in use:
| Device | Width | Height | Scale |
|---|---|---|---|
| iPad Pro 12.9" | 1194 | 834 | 117% |
| iPad Pro 11" | 1366 | 1024 | 100% |
| iPad Pro 10.5" | 1112 | 844 | 96% |
| iPad Pro 9.7" | 1024 | 768 | 88% |
| iPad Mini 7.9" | 1024 | 768 | 88% |
For other symbols (popups, navbars, etc.), do not scale. Popups should not be resized at all. Navbars width should be adjusted to span the screen.
Severeal of the Toolpicker tools or palette buttons open popups when tapped in order to access more settings like tip size, opacity, etc.
Finally, the library provides a vector-based render of the generation 2 Apple Pencil.
The library can be downloaded and installed locally, or installed as a remote library. If you download and install locally, you will have to manually check for and install updated. If you install as a remote library, you will recieve automatic updates when new library versions are published to GitHub.
Copy and paste the following into your browser address bar to install the remote library:
sketch://add-library?url=https%3A%2F%2Fgithub.com%2FWireFrameRate%2FPencilKitForSketch%2Fraw%2Fmaster%2FPencilKit.rss
To install in Studio, download PencilKit.studio. From a Studio project, click the '+' button next to Libraries. Locate and select PencilKit.studio to install.
- Color selector popup will be added.
- "More" popup window will be added.
- Tool popups
- Ruler on canvas.