Architecture and structure

Sketch file and page setup 

A good structure for your main Sketch files will greatly improve efficiency in building and using your DSM design system. Think about your Sketch file architecture as a reflection of your design system structure. We recommend first setting up Foundations and Components as separate Sketch files.

There will be portions of your design system that don’t need to exist in Sketch, but it’s best to organize your page structure to match the way you are thinking about grouping Foundations and Components within DSM. This makes the setup process for your design system much faster, and it can help designers quickly find what they're looking for. 

Naming structure

Be sure that consider your naming structure as it cascades down to the design primitives and components within your Sketch files and pages. Within Sketch, this is done with slash "/" naming conventions which offers a tree-branding hierarchy in a Sketch local environment. Thinking about the entire structure as a whole is a good starting point—keep design files ordered and in sync with a design system's structure. 

Action/Buttons/Primary. In the example, the structure and organization in both Sketch and DSM follow a similar pattern. This allows for a better end user experience when working with your DSM managed libraries in Sketch—essentially, the documentation on your DSM web experience matches the experience using design elements in Sketch.