让你的设计系统为你和你的团队服务.pdf

1、Make your design system work for you and your teamSarah RambacherInfoQ June 2024Balance flexibility and consistencyEngage your communityShare expertiseMake it easyMake it easy.your-speaker appearance:-slightly-nervous;background:-front-end-dev;position:-technical-product-owner;Sarah RambacherA short

2、 history of PatternFlyPatternFly 3PatternFly 4PatternFly 5Design Tokens“A library of solved problems”Ship Faster by Building Design Systems SlowerJosh ClarkPublished Oct 23,2023Promote consistency but not too muchSelect componentEngage the communityProvide centralized expertise Make it easyPatternFl

3、y seed projectgit clone https:/ patternfly-react-seednpm install&npm run start:devBreaking changesUh ohHere we go againDesign TokensCSS is awesomeCSS with Design Tokens is even better!CSS is awesomeVisual design atoms of the design system“Design tokens represent the small,repeated design decisions t

4、hat make up a design systems visual style.”A design token is a documented design decision.card background-color:#EDF2FA;color:#07429B;.card background-color:var(-gray-200);color:var(-blue-600);.card background-color:var(-gray-200);color:var(-blue-600);.card:hover background-color:var(-gray-100);colo

5、r:var(-blue-400);.button background-color:var(-background-color-primary);color:var(-text-color-on-primary);.button:hover background-color:var(-background-color-primary-hover);color:var(-text-color-on-primary-hover);SpacersTypographyDimensionsTransitions and timingThere are only two hard things in Co

6、mputer Science:cache invalidation and naming things.Phil KarltonPhil Karltons original homepage from NetscapeNaming Tokens in Design Systems-Nathan Curtis,Oct 2020ScopeComponentPropertyConceptVariantStateScopeComponentPropertyConceptVariantStateScopeComponentP