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:
Unzip the Symbol. Install the necessary fonts. Create a new file in Sketch and connect the library with hotkeys “Cmd + ,” or manually as shown in the video.
The library structure
We divided the Library into 3 parts:
It is the base of our system. Sketch allows us to create Layer Styles and Text Styles for further quick use out-of-box and that’s cool! Let’s use it.
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.
We decided to divide it into Empty, Fill, Ghost, Field, Image, Shadows. If necessary, you can add new sections such as patterns. To do this, select a shape, add a new style and click Create new Layer Style in the control panel. Using the “/” in the style name you can group styles and create sections.
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.
The color palette of our design system. Includes:
Action — primary, validation colors, custom
Light — light action colors versions
Black & White — with a different opacity
Gray — different 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.
Stroke without fill, uses Fill colors. Let's apply the new palette directly from Document Colors.
Combines stroke and fill. Here we will also apply new colors.
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.
In our case, they are Typography and Icons.
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.
S size icons work with S, U texts.
These are styles and different combinations inserted into components. We divided them into Layer Symbols, Icons, Text Symbols, Illustrations, Mockups.
Elements and components of the same size are interchangeable.
As we see, new colors are automatically applied. They are divided into Fill, Ghost, Placeholder, Field, Images, Tooltip & Divider Placeholders. It systematizes the rounds and with the help of several layers makes it possible to combine Layer Styles.
＜, ⊂, 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.
They work in one size override so that they allow us to quickly select and apply an icon among the Text Icons and Layer Icons and its color.
Are used to switch quickly between different text alignments and text combinations with an icon inside the components, for example, an input field. Here is how it works.
M & L Icon position is inverted twice for proper operation.
At a distance less 21px between texts the state L & R does not work.
Unifies all illustrations in one override.
Unifies mockups into semantic overrides. Allows the quick selection of the mockup, its color and load the desired screen.
Consist of styles and elements, apply all the changes automatically. Separated in turn into:
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 🔥
Insert a new logo, adjust the size and slightly change the styles.
Badges, Popups, Navigation
Apply changes to the components, in places we set up new styles.
Finally, we can see what happened to us as a library of components turbocharged by the very atoms.
It applies all changes from the styles of elements and components. To update the UI Kit, open it and in the upper right corner click on the Update Library badge. All changes from the library will be applied automatically.