Symbol Design System

Styles & Symbols based on Sketch 54.1

Arthur Yarkov
May 2, 2019 · 5 min read

Hi everybody ✌🏻 My name is Arthur and I am a sr. system designer. Everything is not so bad 😂 I just really like to simplify things and drive into the system border. The previous 18 months I spent in Craftwork working on a design system. In this article, I will tell you about the logic on which the Symbol Design System is built. How the system works and quickly redesigns. Along the way, revealing the subtleties and involved special features. So, let's go 🔥

To get started with the design system you need:

Connect library

Missing Fonts

The library structure

  1. Styles
  2. Elements
  3. Components

1. Styles

Note! Making changes in the style and clicking the update button will follow a chain reaction. All elements and components which use this style will apply it automatically.

Layer Styles

Empty
It can take any style at the right time for us. Here is how it works on the example of adding a shadow to the button.

Fill
The color palette of our design system. Includes:

Action — primary, validation colors, custom
Light — light action colors versions
Black & Whitewith a different opacity
Graydifferent shades
Social social media colors

We duplicated the palette structure in Document Colors. Import any changes you make to the palette in Document Colors for quick reference.

Apply a new palette. Save the changes in styles and duplicate the changes in Document Colors.

Ghost
Stroke without fill, uses Fill colors. Let's apply the new palette directly from Document Colors.

Field
Combines stroke and fill. Here we will also apply new colors.

Image
It gives the opportunity to upload an image. The pattern was generated here. Image is taken from Unsplash. See how it works on the card.

Shadows
Is used to animate or highlight the object of the system. You can change the x, y, blur, spread settings if necessary in the Inspector Panel and click Update. We will just apply new colors.

Text Styles

Typography
The best practice is to use sans, in our case, this is Work Sans. The interline is 4px step, for a common rhythm. Replace Work Sans with Fira Sans, then adjust the colors through Document Colors.

A1, A2, A3, A4 — Headings, named A for the hierarchy in the list.
U — uppercase, S — small, M — middle, L — large, E — extra
Matches to the size of the icons that they work with.

Icons
Font Awesome and Apple Emoji are used. Apply new colors.

S size icons work with S, U texts.

2. Elements

Elements and components of the same size are interchangeable.

Layer Symbols

Shorthands
<, ⊂, L — left
M — middle
>, ⊃, R — right
⋀, ⋂, T — top
⋁, ⋃, B — bottom
⊂⊃, X —horizontal, left and right
Y — vertical, top and bottom
XXR — roundings
💭 — empty
👁‍🗨 — fill

Let’s change the rounds through the “Enter” edit mode from 4, 8, 12, 16 to 5, 10, 15, 20. With the help of the Rename It plugin, we will change the names of the round elements to new ones. Using the button as an example, we will show how this works. We also change the rounds in the remaining sections.

Icon Symbols

Text Symbols

M & L Icon position is inverted twice for proper operation.
At a distance less 21px between texts the state L & R does not work.

Illustrations

Mockups

3. Components

Logotype, Avatars, Buttons, Button Groups, Icon Button Groups, Simple Button Groups, Date Pickers, Breadcrumbs, Badges & Tags & Rates, Cards, Carousel, Empty State, Popups, Players, Drop Areas, Selectors, Input Fields, Text Areas, Dropdown Menus, Blocks Headers, Step Indicators, Navigation, Pagination, Tabs, Icon Tab Groups, Split Tab Groups, Simple Tab Groups, Feedback Indicators.

We will make adjustments to match the new palette in some places and see what we have 🔥

Logotype

Badges, Popups, Navigation

Overview

UI Kit

That’s it! Special thanks to Trewor for the background music. Follow me on Twitter and Dribbble to be updated. See you soon in Figma🔥

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store