Get best of the week

设计令牌可以做更多的事情：创建有关UI组件的单一信息源

长期以来，IT中的“设计系统”一词并没有使任何人感到惊讶。公司通过发明自己的产品或使用其他人的工具来管理样式，图案和组件，从而使产品设计系统化。 


Badoo也不例外：借助我们的Cosmos设计系统，我们支持在四个平台上运行的四个应用程序的通用设计原则。 


图片


创建设计系统的工作首先要涉及的主要内容是令牌（或变量），这些令牌（或变量）确定系统不同实体的值。 


怎么运行的？例如，您有两个平台的应用程序。您可以将这些值存储在JSON文件中，而无需在CSS文件中为每个字体重新指定字体大小和样式，可以轻松将其转换为任何平台的代码。将来，此文件可以在具有其他代码库的其他项目中使用。 


尽管有设计令牌的潜力，但在许多公司中，它们的结构仍然非常简单，这极大地限制了其使用的可能性。 


(Cristiano Rastelli), - Cosmos. , : . 


— , - Badoo .


, ( ) - , , — , (elevation).


: - - , .
, .


- ,


, - « ». .


, : Design System Playground. , , — . 


- — , «» :



, - designtokens.dev


, - Figma, Sketch Framer. , , . .


- -: , , , , , .


: . , , , - .


, - , :


  1. ;
  2. .

-


- .
- « — », . , , — ( ). 


( - ) (, , ). , , - .


, (, ), , , . , - . , - — . . .


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/xxx.json
{
    "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.json
{
    "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.json
{
    "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.

More articles:


All Articles