Getting Started - Designers

Welcome

This getting started guide is intended for designers. See below for instructions on how to install the design toolkit and start using it to design components.

Spark Design System Toolkit

The Spark Design System is an ever evolving framework that contains all visual assets used to create a responsive web experience. For a designer, Spark provides visual documentation and recommendations on how to apply the visual styles and how to use the components.

Every design element housed within Spark has been built out in our Spark Toolkit to help with rapid design and layout prototyping.

The Spark Design System Team makes frequent updates to the Spark Toolkit to ensure that it is always up to date with our latest design recommendations.

Sketch

To use the Spark Design System Sketch template, follow these steps:

• Download the sketch template file.
• Open file in sketch, then click File -> Save as Template.
• Create a new document, by clicking File -> New From Template -> Spark Design System (version).

When the new document is opened, you'll see a list of Pages.

• Blank Page - this is the default workspace.
• Quick Start - this page contains some quick layouts for getting started quickly. (i.e. A page with a Masthead and Footer Layout in place)
• Symbols - these are the pieces of Spark as defined in Sketch, no need to edit this page.

Using Spark Components

In order to insert a Spark Component into your design:

• click the Insert button
• hover over Symbols
• select Component to insert
• see available properties in the right pane of selected component.

Change Workflow and Contribution Guide

The Spark Sketch template will be updated with each release of Spark. If you are interested in contributing to Spark, please read our full change workflow and contribution guide to get started.