Work smarter, not harder. A default template for organizing your design files.

We've built interfaces for a large variety of applications and always run into the same problems... we reinvent the wheel for basic components, abandon our wireframe assets once visual design begins, and we have to clean up messy files after the fact so others can pick up where we left off. In short, we've spent too much time pixel-pushing, at the expense of time spent exploring the best approach to any given problem.

So we created a standard set of sketch symbols, text styles, and shared styles, in order to create efficiencies across the entire workflow. This includes appropriate baseline hierarchies for typography, form field best practices, rem-based flexible grids, and much more. These symbols are responsive-minded and stretchable from 320 mobile through 1400+ ultra-hd desktop.

We've already put this template to the test, as a starter file for a couple of projects. We have had great success in speed and efficiency, particularly transitioning from low fidelity wireframes to visual design.

Our goal for this framework is to provide a base set of components to build on, which feel less like a contstained bootstrap pattern library, and more of an adaptable approach to interface design.

Introduction

Take a look at the "Example" page artboard, specifically each of the layers used... Each of these elements are tied to either corresponding symbols, text styles, or shared styles, which are globally defined. What does that mean? Let's say you have an application flow spanning 50+ different screen states. With this design system, you can update one element and push it out to all iterations of it.

We've provided some sensible defaults, and this framework is meant to facilitate good structure and process for your production design workflow.

How to Use

This sketch file utiizes the San Francisco font for some of the iOS symbols we've included. If you do not have this font already, head to https://github.com/AppleDesignResources/SanFranciscoFont and download the associated otf files.

1. Navigate to the "Style Masters" page; think of this as your global control center for the project.

2. Update the colors and typography as you see fit. (We've come up with some defaults to get you started)

3. Don't forget to SYNC everything you've changed, so it cascades through the document.

4. Navigate to the "Symbols" page; this is a starter set of basic components that you could use for an interface design. You should also notice any changes that you've made to color & typography should now be applied to the these components.

5. Navigate to the "Grid Templates" page; you can use one of these artboards as the base dimensions for your project... the layout/grid will be passed to all subsequent artboards.

6. We've also provided some google material designs for easy access

Your Feedback is Requested

We're not looking to charge for this resource, but we would love for you to contribute to the future of this effort. Find an bug in the sketch file? Please log an issue. Have a great idea for a future release? Let us know!