Istilah "sistem desain" di TI tidak mengejutkan siapa pun untuk waktu yang lama. Perusahaan mensistematisasikan desain produk dengan menciptakan sendiri atau menggunakan alat orang lain untuk mengelola gaya, pola, dan komponen.
Badoo tidak terkecuali: dengan sistem desain Cosmos kami, kami mendukung prinsip-prinsip desain umum untuk empat aplikasi yang berjalan pada empat platform.
Salah satu hal pertama dan utama yang dengannya pekerjaan menciptakan sistem desain dimulai adalah token (atau variabel), yang menentukan nilai entitas yang berbeda dari sistem.
Bagaimana itu bekerja? Misalnya, Anda memiliki aplikasi untuk dua platform. Alih-alih menentukan kembali ukuran dan gaya font dalam file CSS untuk masing-masing, Anda dapat menyimpan nilai-nilai ini dalam file JSON, yang dapat dengan mudah dikonversi ke kode untuk platform apa pun. Di masa depan, file ini dapat digunakan dalam proyek lain dengan basis kode lainnya.
Terlepas dari potensi token desain, di banyak perusahaan struktur mereka tetap cukup sederhana, yang sangat membatasi kemungkinan penggunaannya.
(Cristiano Rastelli), - Cosmos. , : .
— , - Badoo .
, ( ) - , , — , (elevation).
: - - , .
, .
- ,
, - « ». .
, : Design System Playground. , , — .
- — , «» :
, - designtokens.dev
, - Figma, Sketch Framer. , , . .
- -: , , , , , .
: . , , , - .
, - , :
- ;
- .
-
- .
- « — », . , , — ( ).
( - ) (, , ). , , - .
, (, ), , , . , - . , - — . . .
Badoo -
, -, , . -.
- (Lifestyle Badge)
, , JSON- Lifestyle Badge ( Style Dictionary):
{
"lifestylebadge": {
"height": {
"value": "34",
"type": "size"
},
"border_radius": {
"value": "17",
"type": "size"
},
"padding": {
"start": {
"value": "{spacing.md.value}",
"type": "size"
},
"end": {
"value": "{spacing.md.value}",
"type": "size"
}
},
"icon_size": {
"value": "{icon.size.md.value}",
"type": "size"
},
"spacing_icon_text": {
"value": "{spacing.xsm.value}",
"type": "size"
},
"base": {
"text_color": {
"value": "{color.gray_dark.value}",
"type": "color"
},
"background_color": {
"value": "{color.gray_light.value}",
"type": "color"
}
},
"selected": {
"text_color": {
"value": "{color.white.value}",
"type": "color"
},
"background_color": {
"value": "{color.primary.value}",
"type": "color"
}
}
}
}
( , iOS, Android) ( (white label brands)).
, , , -:
Lifestyle Badge Android -
. , «» — — , , .
. Sketch- ( Sympli) , . - /, , .
, - .
- (Action Sheet). (gravity)!
, , .
- - : , - /. , — , .
- (, ) / (, ), JSON- . : !
- , .
-
- (Theo Style Dictionary) « — ». , - , .
, , , . , , . . , , , .
, - -, «/» («documentation/comment»). , -. documentation, comment, , : , - .
-:
{
"actionsheet": {
…
"item": {
"height": {
"value": "48",
"type": "size",
"documentation": {
"comment": "Notice: this is the 'internal' size, the border will be added as extra"
}
},
…
}
}
}
:
— «» ("type"). , .
, :
{
"color": {
"primary": {
"value": "{color.palette.purple_grape.value}",
"type": "color"
}
},
"icon": {
"size": {
"xsm": {
"value": "10",
"type": "size"
}
}
},
"tooltip": {
"shadow": {
"opacity": {
"value": "0.08",
"type": "opacity"
}
},
"animation": {
"timing_bounce": {
"value": "0.9",
"type": "time",
"unit": "s"
}
}
},
"chat": {
"bubble": {
"relative_width": {
"value": "0.8",
"type": "ratio"
}
}
},
"actionsheet": {
"gravity": {
"value": "center",
"type": "string"
}
}
}
«» . , XML- Android:
«» , Android
:
Android XML- /, "type"
: «» ("group"). , .
(, ). :
«»
, : «» ("color"), — «» ("alias"). , ( color-palette-purple-grave) , , isAlias.
:
- "type",
, . .
— - .
, «» ("group") , , ( ) .
- :
{
"color": {
"primary": {
"value": "{color.palette.purple_grape.value}",
"type": "color",
"group": "brand"
},
…
"generic_red": {
"value": "{color.palette.pink_salmon.value}",
"type": "color",
"group": "generic"
},
…
"gray_dark": {
"value": "#767676",
"type": "color",
"group": "mono"
},
"feature": {
"verification": {
"value": "{color.palette.blue_neon.value}",
"type": "color",
"group": "features"
},
…
},
"provider": {
facebook": {
"value": "#4867aa",
"type": "color",
"group": "providers"
},
…
},
"others": {
error": {
"value": "{color.generic_red.value}",
"type": "color",
"group": "others"
},
…
}
}
}
{
"icon": {
"size": {
"xsm": {
"value": "10",
"type": "size",
"group": "size"
},
"sm": {
"value": "16",
"type": "size",
"group": "size"
},
"md": {
"value": "22",
"type": "size",
"group": "size"
},
"lg": {
"value": "30",
"type": "size",
"group": "size"
},
"xlg": {
"value": "36",
"type": "size",
"group": "size"
},
"xxlg": {
"value": "46",
"type": "size",
"group": "size"
}
},
"jumbo-size": {
"sm": {
"value": "{brick.size.sm.value}",
"type": "size",
"group": "size"
},
"md": {
"value": "{brick.size.md.value}",
"type": "size",
"group": "size"
},
"lg": {
"value": "{brick.size.lg.value}",
"type": "size",
"group": "size"
}
}
}
}
{
"spacing": {
"xsm": {
"value": "4",
"type": "size",
"group": "size"
},
"sm": {
"value": "8",
"type": "size",
"group": "size"
},
"md": {
"value": "12",
"type": "size",
"group": "size"
},
"lg": {
"value": "16",
"type": "size",
"group": "size"
},
"xlg": {
"value": "24",
"type": "size",
"group": "size"
},
"xxlg": {
"value": "32",
"type": "size",
"group": "size"
},
"gap": {
"value": "{spacing.lg.value}",
"type": "size",
"group": "size"
}
}
}
Sass ( Sass maps, ):
$tokens-color-map: (
providers: (
provider-facebook: $token-color-provider-facebook,
…
),
mono: (
black: $token-color-black,
gray-dark: $token-color-gray-dark,
gray: $token-color-gray,
gray-light: $token-color-gray-light,
white: $token-color-white
),
others: (
error: $token-color-error,
…
),
brand: (
primary: $token-color-primary,
…
),
generic: (
generic-red: $token-color-generic-red,
…
),
features: (
…
feature-verification: $token-color-feature-verification
),
);
$tokens-icon-map: (
size: (
size-xsm: $token-icon-size-xsm,
size-sm: $token-icon-size-sm,
size-md: $token-icon-size-md,
size-lg: $token-icon-size-lg,
size-xlg: $token-icon-size-xlg,
size-xxlg: $token-icon-size-xxlg,
jumbo-size-sm: $token-icon-jumbo-size-sm,
jumbo-size-md: $token-icon-jumbo-size-md,
jumbo-size-lg: $token-icon-jumbo-size-lg
),
);
$tokens-spacing-map: (
size: (
xsm: $token-spacing-xsm,
sm: $token-spacing-sm,
md: $token-spacing-md,
lg: $token-spacing-lg,
xlg: $token-spacing-xlg,
xxlg: $token-spacing-xxlg,
gap: $token-spacing-gap
),
);
...
:
Sass-, -
, / , — , , , . ., Sass- , , .
Sass- .
. . -.
CSS/Sass. , , JavaScript:
- , , "group"
— CSS--JS. (, ) / « — », -.
"group" TypeScript-. :
declare namespace Tokens {
namespace Color {
enum Providers {
PROVIDER_FACEBOOK = 'provider-facebook',
…
}
enum Mono {
BLACK = 'black',
GRAY_DARK = 'gray-dark',
GRAY = 'gray',
GRAY_LIGHT = 'gray-light',
WHITE = 'white'
}
enum Others {
ERROR = 'error',
…
}
enum Brand {
PRIMARY = 'primary',
…
}
enum Generic {
GENERIC_RED = 'generic-red',
…
}
enum Features {
…
FEATURE_VERIFICATION = 'feature-verification'
}
type Color = Providers | Mono | Others | Brand | Generic | Features;
}
namespace Icon {
enum Size {
XSM = 'xsm',
SM = 'sm',
MD = 'md',
LG = 'lg',
XLG = 'xlg',
XXLG = 'xxlg',
JUMBO_SM = 'jumbo-sm',
JUMBO_MD = 'jumbo-md',
JUMBO_LG = 'jumbo-lg'
}
}
namespace Spacing {
enum Size {
XSM = 'xsm',
SM = 'sm',
MD = 'md',
LG = 'lg',
XLG = 'xlg',
XXLG = 'xxlg',
GAP = 'gap'
}
}
}
export default Tokens;
TypeScript- ( IDE).
- , , . , : font-family, font-size, line-height font-weight.
-, « H1»? , . , , / ?
, , , .
:
- - — , .
- - -, UI-.
- - . , « — ».
, :
- -;
- ;
- Sass, JavaScript, TypeScript;
- ( ) .
, -. - . , ( ) , -, , .
. , , , , .
!
P. S. , -, - , , . W3C, . , Badoo -, : How to manage your Design Tokens with Style Dictionary.