Get best of the week

Los tokens de diseño pueden hacer más: crear una única fuente de información sobre los componentes de la interfaz de usuario

El término "sistema de diseño" en TI no ha sorprendido a nadie durante mucho tiempo. Las empresas sistematizan el diseño de productos inventando sus propias herramientas o utilizando herramientas de otras personas para administrar estilos, patrones y componentes. 


Badoo no es una excepción: con nuestro sistema de diseño Cosmos, admitimos principios de diseño generales para cuatro aplicaciones que se ejecutan en cuatro plataformas. 


imagen


Una de las primeras y principales cosas con las que comienza el trabajo para crear un sistema de diseño son los tokens (o variables), que determinan los valores de las diferentes entidades del sistema. 


¿Cómo funciona? Por ejemplo, tiene una aplicación para dos plataformas. En lugar de volver a especificar el tamaño y el estilo de fuente en el archivo CSS para cada uno, puede almacenar estos valores en un archivo JSON, que se puede convertir fácilmente en código para cualquier plataforma. En el futuro, este archivo se puede usar en otros proyectos con otras bases de código. 


A pesar del potencial de los tokens de diseño, en muchas empresas su estructura sigue siendo bastante simple, lo que limita en gran medida las posibilidades de su uso. 


(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