Get best of the week

Les jetons de conception peuvent faire plus: créer une source unique d'informations sur les composants de l'interface utilisateur

Le terme «système de conception» en informatique n'a surpris personne depuis longtemps. Les entreprises systématisent la conception des produits en inventant les leurs ou en utilisant les outils d'autres personnes pour gérer les styles, les modèles et les composants. 


Badoo ne fait pas exception: avec notre système de conception Cosmos, nous prenons en charge les principes généraux de conception pour quatre applications exécutées sur quatre plates-formes. 


image


L'une des premières et principales choses par lesquelles commence le travail de création d'un système de conception est les jetons (ou variables), qui déterminent les valeurs des différentes entités du système. 


Comment ça fonctionne? Par exemple, vous avez une application pour deux plates-formes. Au lieu de spécifier à nouveau la taille et le style de police dans le fichier CSS pour chacun, vous pouvez stocker ces valeurs dans un fichier JSON, qui peut facilement être converti en code pour n'importe quelle plate-forme. À l'avenir, ce fichier pourra être utilisé dans d'autres projets avec d'autres bases de code. 


Malgré le potentiel des jetons de conception, dans de nombreuses entreprises, leur structure reste assez simple, ce qui limite considérablement les possibilités d'utilisation. 


(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