Sketch

Everything about the system in Sketch is designed so our designers spend less time needlessly creating and re-inventing our styles, and more time focussing on user experience, iteration and building the best product. All in the interest of consistency and efficiency.

Below are notes on design system best practices for quality control, in Sketch ↗.

Naming Conventions

An important part of system design is naming conventions. The systems naming conventions should be used in all designs, specs and communication, and are reflected in the naming of text styles, symbols and Craft Library in Sketch. The ultimate goal is for the code (CSS) to also use the same names, so everyone is speaking the same language.

System colors in Sketch

Color System

The system uses Sass variables to name the colors, and define a (CSS) color spectrum based on a few base colors. All system colors are easily accessible via the system Craft Library.

For a quick preview, see:

See the color section for more information, guidelines and downloads for the system foundational colors.

System text styles in Sketch

Naming Text Styles

The text styles works much the same way as naming symbols.

  • Each text style should include the name, followed by a forward slash ("/") so they are organized together for easy access.
  • The default text style should be in $black50 color.
  • In order to avoid accidental overriding of text styles in use in Sketch it's also useful to define new text styles for different colors, for each text style (e.g. "Copy 2 /", and "Copy 2 / $blue50" and "Copy 2 / $red50" ).
  • Likewise, a new text style should be created for a bold (<strong>) font-weight (e.g. "Copy 2 / <strong>" or "Copy 2 / $blue50 <strong>")
  • All styles are for desktop and breakpoint 1 by default. Any text styles for a breakpoint for use in responsive designs should also have a text styles created for them, suffixed by "- bp2" (breakpoint 2). So use "Copy 2 / - bp2" or "Copy 2 / $blue50 - bp2".

Using Text Styles

The system has defined text styles. All master, template and working Sketch files should have these system text styles loaded and ready to use. Please assign a text style to all text (where possible) in your working Sketch files — this way we won't stray from the system.

The system text styles are designed to cover a wide range of scenarios. Bespoke styles can be used (sparingly), but should be discussed with the design system team, and even integrated into the system if a new style is deemed a useful inclusion to the system. See the typography section for guidelines and downloads for the system foundational text styles.

See also: Importing text styles into Sketch

Control symbols in Sketch

Naming Symbols

Naming symbols using forward slashes ("/") sorts symbols into folders, for easy access.

  • For example a symbol named "text input /" will create a folder called "text input", with that symbol as the one symbol in that folder.
  • Creating a second symbol called "text input / error" will add this new symbol into the "text input" folder.
  • This practice is ideal when organizing nested symbols.

Using Symbols

The system has control symbols, which should cover all components. Ideally these should be used in designs wherever possible, in the interest of consistency, and maintenance (the symbols 'in theory' can be updated via Craft Library).

Patterns are trickier to manage with symbols, but we should strive to be as consistent as possible when designing with our established patterns, featuring our component symbols and foundational text styles and colors.


The System in Sketch

Control Symbols

Control symbols are Sketch symbols containing a number of nested symbols. There are Sketch symbols for all components in the system. The idea is they are the only symbols you will need to create a UI. Via symbol overrides you can quickly switch between different states of each component (e.g. a form inputs placeholder, value, focus or error state, or different types of buttons and their normal and hover states), while maintaining all the symbols values. Any changes you make to the nested symbols (used in the control symbol) will be reflected in the control symbol and wherever it is used. Read a tutorial for creating control symbols in Sketch ↗

Styleguides

Specs for all system foundations, patterns and components are all saved out from the master Sketch file below for quick viewing/sharing. View folder ↗


Sketch Resources

Auto Save in Sketch

Please turn off the auto save feature in Sketch's preferences, before viewing any Sketch files linked to from this documentation. It's turned on by default. It's very easy to unwittingly make changes while viewing a Sketch file with the auto save on.

Master System File

The system foundations, patterns and components are all created and maintained in one master Sketch file. Our Sketch Library for the system is controlled by this master file. Please be careful — any edits made to the master system Sketch file will be synced to other Sketch files using those shared component symbols.

Responsive Sketch template

Download the above Sketch template


Importing Text Styles into Sketch

There's a Sketch plugin for importing the system text styles into any Sketch file. Follow the instructions below to install and use it:

  • Download the Shared Text Styles ↗ plugin for Sketch.
  • In the downloaded folder, open the 'shared-textstyles.sketchplugin' file in Sketch.
  • In the file menu at the top of Sketch, you should now be able to access:
  • Plugins > Shared Text Styles > Import Text Styles…*
  • Having clicked the above link, locate and import the 'rivendell-text-styles.json' file in Rivendell Design System folder on Dropbox.
  • You should now have all the Rivendell system text styles!

results matching ""

    No results matching ""