/
platformos-design-kit.liquid
147 lines (82 loc) · 7.95 KB
/
platformos-design-kit.liquid
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
---
converter: markdown
metadata:
title: The platformOS DesignKit
description: This article introduces the content of our DesignKit in Figma and describes the methodology of how we built and organized it.
---
This article introduces the content of our DesignKit in Figma and describes the methodology of how we built and organized it. It gives you a better understanding of how it works, and where you can find the information you need.
## Foundations
We use the term ‘DesignKit' for the whole design file. Its content is separated into different groups based on the level of complexity. For the Foundations part, you can find the Style Guide and the Component Library.
The **Style Guide** sets the most elementary part of the whole system: it contains the colors, the typography, and the design tokens. The **Component Library** uses these styles as defined in the Style guide. Components are organized by the [Atomic Design](https://atomicdesign.bradfrost.com/) methodology. **Sections** and **Modules** use components, and **Page** templates use Sections and Modules, but they aren't part of the first public version.
Besides Style Guide and Component Library, we’ve collated useful information for the Getting Started and Rules pages. These are also part of the Foundations section.
<img loading="lazy" src="{{ 'images/kits/ui/designkit/designkit_illustration.jpg' | asset_url }}" alt="Graphic explaining the key elements of the DesignKit" />
<p align="center"><i>Image: Graphic explaining the key elements of the DesignKit</i></p>
### Cover
The Cover contains the name of the DesignKit and its current version number.
### Getting Started
In the Getting Started page we highlight all the information you need to start your work.
<img loading="lazy" src="{{ 'images/kits/ui/designkit/getting_started.png' | asset_url }}" alt="The view of the Getting Started page" />
<p align="center"><i>Image: The view of the Getting Started page</i></p>
#### Version Number
This screen always shows the current version number of the design file. By checking this screen you always know whether you have the newest version of the file or not.
#### Road Maps
At Road Maps you can find what enhancements and fixes are planned for the future, highlighting what tasks have already been done. For more detailed information about the content of the new versions, please, go to the Release Notes in our documentation site.
#### Getting Started Guide
In the Getting Started Guide screen you can get the basic information about the DesignKit:
* How the font library works
* How the icon library works
* General information about the styles we used in the DesignKit
* What the auto layout and variants features are
* …and information about accessibility standards, support and licensing.
### Overview
The Overview is a table of content page, where you can navigate through quick link cards to the different parts of the DesignKit.
<img loading="lazy" src="{{ 'images/kits/ui/designkit/overview.png' | asset_url }}" alt="The view of the Overview page" />
<p align="center"><i>Image: The view of the Overview page</i></p>
### Rules
In the Rules page we collected all the information you need when you build a new screen from scratch:
* Padding sizes and usage throughout a screen: how the different sections relate to each other.
* Spacing between grouped components: relationships between buttons, tags, cards, etc.
* Pop-up sizes
* The functions of the different kinds of tabs
* Icon sizes and their usage
* UX rules about button usage, link naming, and user profiles
<img loading="lazy" src="{{ 'images/kits/ui/designkit/rules.png' | asset_url }}" alt="The view of the Rules page" />
<p align="center"><i>Image: The view of the Rules page</i></p>
### Style Guide and Component Library
This page contains the Style Guide and Component Library. Separately, provided are three step-by-step guides to help you through the standard customization flows: set your brand colors, your brand fonts, and your logo. (You can also find these articles in the documentation site, including video tutorials.)
#### Style Guide
In the Style Guide part, you can find the basic elements of the DesignKit: the Color variants, the Typography, and the Design tokens.
<img loading="lazy" src="{{ 'images/kits/ui/designkit/style_guide.png' | asset_url }}" alt="The view of the Style Guide in the Style Guide+Components page" />
<p align="center"><i>Image: The view of the Style Guide in the Style Guide+Components page</i></p>
##### Color variants
The Color variants screen shows all the color styles you can find in the styles panel on the right. Every component and element in the DesignKit uses one or more colors from the Color variants palette. Learn more about this in the [Color Variants](/kits/ui/color-variants) topic.
##### Typography
In the Typography page, we collected all the text styles that the DesignKit uses. You can find a small example section there, too, so you can get an insight into how the different styles relate to each other and when you set your brand fonts, you can see immediately how they work.
##### Design Tokens
At Design Tokens, we collected all the other core properties and styles we use in the DesignKit with descriptions:
* Elevation
* Radius
* Borders
#### Components
In the Components section, you can see the main components that the DesignKit uses. For certain components we have used the Variants feature of Figma. For example, the DesignKit contains 216 buttons: it’s easier to use one main component, and set its specifications from a configuration panel, than to try to find the right component from 216 different versions.
<img loading="lazy" src="{{ 'images/kits/ui/designkit/components_buttons.jpg' | asset_url }}" alt="The button variants and the variant panel" />
<p align="center"><i>Image: The button variants and the variant panel</i></p>
For easier usability, we added an Instance widget for every component that uses variants. You’ll be able to copy the instance from there, because copying from a variant section creates another main component, **not an instance**.
{% include 'shared/video', id: 'yEbDNXfi6aE' %}
We built the Component Library based on the Atomic Design methodology, so the different groups follow this organization method and the complexity grows from top to bottom (Atoms → Molecules → Organisms).
In the first row, there are the Atoms, the most elementary components of the DesignKit. We separated them into different categories by function, to make them more scannable.
The second row contains the Molecules: the components which are built from the Atoms. We positioned the related screens below each other, for example at the Atoms – Options screen you can find the tab components, and below that there is the Molecules – Options screen which contains the full tab line built from the tab atom component.
The third row shows the most complex components: the Organisms. These components are made up of Atoms and Molecules.
<img loading="lazy" src="{{ 'images/kits/ui/designkit/components.png' | asset_url }}" alt="The view of the Components in the Style Guide + Components page" />
<p align="center"><i>Image: The view of the Components in the Style Guide + Components page</i></p>
#### Customization guide
In the Customization guide, you can find the three step-by-step tutorials about a standard customization flow:
* Set your brand color
* Set your brand font(s)
* Set your logo
Besides these, there is some information about the high-level customization.
<img loading="lazy" src="{{ 'images/kits/ui/designkit/customization_guide.png' | asset_url }}" alt="The view of the Customization Guide in the Style Guide + Components page" />
<p align="center"><i>Image: The view of the Customization Guide in the Style Guide + Components page</i></p>
## Upcoming versions
The next versions of the DesignKit will contain more complex graphical elements: Sections and Modules. For subscribed users the full DesignKit will be available with 50+ page templates built from the Modules and Sections.
{% include 'kits/designkit_dl' %}