Download as PDF, PPTX
![<Box className={[styles.firstClass, styles.secondClass,
styles.thirdClass]}>
...
</Box>
Utility Class Approach](https://image.slidesharecdn.com/sharedlanguagethroughdesignsystemsslidesuxdx-emea-2021-210924141814/75/A-Shared-Language-Through-Design-Systems-33-2048.jpg)
![<Box className={[styles.firstClass, styles.secondClass,
styles.thirdClass]}>
...
</Box>
Utility Class Approach](https://image.slidesharecdn.com/sharedlanguagethroughdesignsystemsslidesuxdx-emea-2021-210924141814/75/A-Shared-Language-Through-Design-Systems-34-2048.jpg)
More Related Content
Similar to A Shared Language Through Design Systems
A Shared Language Through Design Systems
- 1. A Shared Language ThroughDesign Systems Nathalie Christmann-Cooper UXDX EMEA | October 2021
- 2. What 18 monthsexperience has taught me Design Systems are hard 01 Design Systems are hard 02 Design Systems are hard 03
- 3.
- 4. Design was my firstlanguage.
- 5.
- 6. I dream incode.
- 7. A Shared LanguageThrough Design Systems The communication challenges between Design and Engineering Bridging past experience with present problems The process in creating a shared language
- 8. Design Tokens The communicationchallenges between Design and Engineering
- 9. Zoopla Product Teams DesignTokens > Communication Challenges Consumer Customer Productivity Zoopla Website and App Property Software for Estate Agents
- 10. Zoopla Design System DesignTokens > Communication Challenges Foundation Patterns Elements Collections Design Teams Consumer Teams Component library Website Component library App Customer Productivity Teams Component library CRM Centralised Design Tokens Design Tokens & Themes
- 11. Colour --color-brand-white: #ffffff; Radius --border-radius-circle: 50%; Breakpoints --breakpoint-mdscreen and (min-width: 1024px); Spacing --spacing-24px: 2.4rem; Design Tokens Examples What are design tokens? Design Tokens > Communication Challenges Centralised Design Tokens Design Tokens & Themes
- 12. Design Tokens Design Tokens> Communication Challenges Agree consistency to build a shared language Talk to build a knowledge base of shared learnings Get the foundations right before building our products Centralised Design Tokens Design Tokens & Themes
- 13. --spacing-24px: 1.5rem; Design Tokens> Communication Challenges
- 14. --spacing-24px: 1.5rem; --base: 4px(0.25rem) --spacing-2x: base*2 (8px) --spacing-3x: base*3 (12px) Design Tokens > Communication Challenges
- 15. Design Tokens -Proposal Process Create an RFC (request for comment) and share in the Slack channel 01 Get Consumer and Customer Tech Leads to champion the proposal 02 Be mindful of any previous issues and surrounding context 03 Design Tokens > Communication Challenges
- 16. --spacing-5x is howmany pixels? And what even is that in REMs?
- 18. No. Figma won’t showthe token names.
- 19. It's not justfor Engineering, Designers need to understand the token names too.
- 20. ● html { html{ font-size: 62.5%; } font-size 10px = 1 REM ● } Design Tokens > Communication Challenges
- 21. --spacing-24px: 2.4rem; Design Tokens> Communication Challenges
- 22. Design Tokens -Proposal Process Create an RFC (request for comment) and share in the Slack channel 01 Get Consumer and Customer Tech Leads to champion the proposal 02 Be mindful of any previous issues and surrounding context 03 Keep a decision log to record the outcome 04 Keep everyone updated 05 Design Tokens > Communication Challenges
- 23. Layout Components Bridging pastexperience with present problems
- 24. Layout Components >Using Past Experience The Problem Space
- 25. Layout Components >Using Past Experience UI glue?
- 26. Layout is themost important thing after design tokens, that we need to get right for a Zoopla Design System. Craig Bilner, Principal Engineer Layout Components > Using Past Experience
- 27. Layout Components Improve standardsand consistency Layout Components > Using Past Experience Maintain quality
- 28. Layout Components Improve standardsand consistency Layout Components > Using Past Experience Increase delivery Speed up development
- 29. Layout Components Improve standardsand consistency Speed up development Utilise deduping / code splitting Layout Components > Using Past Experience Reduce bloat
- 30.
- 31. Setting constraints Layout Components> Using Past Experience
- 32. .mt-0 { margin-top: 0!important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } Utility Class Approach
- 33.
- 34.
- 35. Setting constraints Layout Components> Using Past Experience Don’t use the className prop 01
- 36. Designers treat spaceas a physical ‘thing’ which is placed between elements. Space is not directly applied to an element. Layout Components > Using Past Experience Layout and Spacing with Mark Dalgleish - Frontend Greatness podcast
- 37. Setting constraints Layout Components> Using Past Experience Don’t use the className prop 01 Relational Spacing only 02
- 38. Setting constraints Layout Components> Using Past Experience Don’t use the className prop 01 Relational Spacing only 02 The root node of a component should not have a margin, ie the layout component itself 03
- 39. Scoping the work LayoutComponents > Using Past Experience
- 40. Scoping the work LayoutComponents > Using Past Experience
- 41. Give the functionalitythat an Engineer wants, but use the language of Design
- 42. Setting constraints Layout Components> Using Past Experience Don’t use the className prop 01 Relational Spacing only 02 The root node of a component should not have a margin, ie the layout component itself 03 Accept valid Spacing Design Tokens only 04
- 43.
- 44. Braid Design System- Box Component The Box Manages spacing around its child content <Box spaceHorizontal=”--spacing-24px” spaceVertical=”--spacing-8px”> <h2>The Box</h2> </Box>
- 45. Every Layout -Stack Layout The Stack Manages spacing between its child content <Stack space=”--spacing-8px”> <h2>Child one</h2> <p>Child two</p> <div>Child three</div> ... </Stack>
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. Or is ithow we translate what a Design System is that makes it hard for everyone working with it to understand?
- 52. Or is ithow we translate what a Design System is that makes it hard for everyone working with it to understand?
- 53. Thank you. @she_codes Nathalie Christmann-Cooper FrontendSoftware Engineer UXDX EMEA | October 2021 Photos courtesy of Gratisography.com