Whatever you find in the UI Components will, in some way or form, be available for use in Sketch. Instead of spinning your wheels replicating button styles, all these symbols and groups are compiled together in a beautifully organized library. Here’s what you’ll need to do get going with it:
Step 1: Get Sketch
Sketch is an application created for designing digital products. It’s a snap to learn. Go get Sketch.
Step 2: Download the DDK
To harness version control and release notes, the library lives on Github.
- Go to the GH repo
- Click the green button (Clone or download) and select Download Zip
- Unzip the folder
Step 3: Open the Library
Hang tight, there are just a few more hoops to jump through.
- Open the library file you downloaded from Github (
- Start a new Sketch document or open an existing one
- Copy and paste any of the components from the library into your working document. Each component group is organized as a page. Some components include variations for size, breakpoint and/or theme.
Note: As part of the digital branding standards, you’ll need to acquire the following typefaces, all of which are available at Typekit:
- The overall organization of the library is similar to the DDK site although the Atomic Design categories have been omitted (Core, Atoms, Molecules) in Sketch.
- Some symbols, like buttons or alerts, utilize Overrides (a subset of the Inspector panel). Whenever a symbol has the same design but a slightly different treatment, overrides are typically employed. Think of an input field within a form. It was a default state but also one for focus, disabled and validation. When these options exist, look for a blue diamond () in the panel. You can also change a symbol’s text without altering the style of the type using overrides. Checkout this example ...
- If you’re starting a new document, begin by dragging one of the device’s sizes from the Artboard section. These artboards contain the layout grids defined in the Responsive Web Design section of the DDK. While five sizes are provided, most layouts will only use the two extremes, Mobile and Desktop HD.
- Because many molecules are a collection of other components, these objects are easier to manage as folders, not nested symbols. This gives the designer more control.
- A note about icons. First off, the default size corresponds to the class .icon-1 in the Icons & Sizing section of the DDK. The size is perfect for body content but can easily be scaled. Secondly, the icons are not symbols but paths. Why? As paths you can more easily apply color without having to change or duplicate a symbol (don’t forget symbols are reusable). Also keep in mind that any icon added to the DDK will be part of the SVG repository, sized and styled by CSS.