May 9, 2018

Symbol Design. Getting Started.

Symbol is advanced web-design system based on Sketch nested symbols. There are not only the components but also the logic, the atomic structure.

Guide contents:

  1. Getting Started (You are here)β€”How to install Symbol.
  2. Color Schemeβ€” Learn how to add and change color pallete.
  3. Typographyβ€” Adding and replacing fonts.
  4. Elements β€” Explore the core of Symbol Design.
  5. Components β€” Adding new base components.
  6. Collection β€” Set of components which ready-to-use in your project.
  7. Plugins β€” List of helpful plugins for use with Symbol Design.
  8. Summary β€” Create your first web-site.

Purchase and Download the Symbol Design

Go to the symboldesign.co and click on the "Get Started" button. Choose license you need and download Symbol Design System from Gumroad. You will get the archive with three sketch files, styles and fonts:

  • Symbol Library.sketch
  • Symbol Collection.sketch
  • Symbol Demo Page.sketch
  • Symbol Text Styles.json
  • Symbol Pallete.sketchpalette

Connect Symbol Library to Sketch

Symbol Library is a Sketch document that contains base components which you can use in your project. If you update any of those components in Library file, layouts containing instances of those symbols will receive a notification telling you that they can be updated.

In the Mac toolbar go to Sketch β†’ Preferences or press ⌘ + ,

Go to the Libraries tab and click Add Library button. Locate the Symbol Library file inside the folder Symbol Design System x.x.x and select it.

Install the Fonts

Double-click the font in the Finder, then click Install Font in the font preview window that opens. After your Mac validates the font and opens the Font Book app, the font is installed and available for use.

You can use Font Book preferences to set the default install location, which determines whether the fonts you add are available to other user accounts on your Mac.

Import Color Palette

Before the start you need to install Sketch Palette Plugin for exporting and importing fill presets. It supports colors, gradients, and Pattern fills. After downloading double-click the .sketchplugin file. Running the Load Palette command in the plugin menu will allow you to choose a Pallete.sketchpalette containing the premade presets.

Import Text Styles

Shared Text Styles currently let's you import and export text styles through a .json file. After installing this plugin you can import Symbol Text Styles into any Sketch document, so the typography is consistent.

Go to your Plugins β†’ Shared Text Styles β†’ Import Text Styles..., to import the Text Styles. You can also use the keyboard shortcut Cmd + Alt + N

Start Creating with Symbol Collection

Symbol Library is an ordinary Sketch document that contains base components which you can then use in your project. If you update any of those components in Library file, layouts containing instances of those symbols will receive a notification telling you that they can be updated.