IJS Munich - Design systems from a developer point of view

Transcript

1. Design Systems: Developer Point of View Yael Balla @ IJS Munich, October 2019
2. Hello! I am Yael Balla You can find me at yael.balla@gmail.com www.linkedin.com/in/yael-oshri-balla-6b56686 2
5. Design Systems? What’s in it for me? 5
6. Agenda - The concept behind design systems - The steps for implementing a design system - What’s next? 6
7. “ the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards 7 https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/
8. “ Before this ... Designers and developers were trying their best to make good decisions about which components or patterns to use, but their main reference point was the existing product — which was decidedly inconsistent. Giorgio Lefeber, Xebia Studio
9. https:/ /uxdesign.cc/can-design-systems-fix-the-relationship-between-designers-developers-eb12fc9329ab Design System Structure
10. Design Systems Examples ▪ Salesforce - Lightning ▪ IBM - Carbon ▪ Google - Material Design ▪ Shopify - Polaris And many others… https:/ /designsystemsrepo.com/design-systems/ 10
14. Wait… Is this applicable also for smaller companies? 14
15. 1. Create Alignment 2. Scope the project 3. Define Building Blocks 4. Implement the UI components 5. Share across the organization Steps for implementing a design system
16. Step #1 Create Alignment
17. Work together Design Dev Product 17
18. Define the rules and guidelines And understand how it affects the design 18
19. Visual Audit
20. Step #2 Scope
21. Start small... 21
22. What do you want to start with? Company site Backoffice tool Core product New initiative
23. How you are going to implement it?
24. Who is responsible? Shared effort or a dedicated team?
25. Step #3 Define building blocks
26. Design Tokens Semantically meaningful property-value pairs 26
27. ▪ Color constants ▪ Spacing and sizes ▪ Typography ▪ Borders ▪ etc
28. Meaningful CSS Variables My green -> success My grey -> body font color $color-pink: #f36; $color-green: #09baa6; $color-yellow: #ffb631; $color-gray: #dee0e4; $color-success: $color-green; $color-warning: $color-yellow; $color-brand: $color-pink;
29. Meaningful CSS Variables $xxs: 4px; $xs: 8px; $s: 16px; $m: 24px; $l: 32px; $xl: 48px; $xxl: 64px;
30. Utilities CSS classes $sizes: (xxs:$xxs, xs:$xs, s:$s, m:$m, l:$l, xl:$xl, xxl:$xxl); @each $size, $value in $sizes { .u-m-#{$size} { margin: #{$value}; } .u-m-#{$size} { margin: #{$value}; } .u-mt-#{$size} { margin-top: #{$value}; } .u-mr-#{$size} { margin-right: #{$value}; } .u-mb-#{$size} { margin-bottom: #{$value}; } .u-ml-#{$size} { margin-left: #{$value}; } .u-mx-#{$size} { margin-left: #{$value}; margin-right: #{$value}; } .u-my-#{$size} { margin-top: #{$value}; margin-bottom: #{$value}; } ...
31. Utilities CSS classes <div className="u-m-s"> I have a text with small margin </div>
32. Primitive Components <Title> This displays a title </Title> <Padded> This displays a text with padding </Padded>
33. Styled System import styled from '@emotion/styled' import { typography, space, color } from 'styled-system' const Box = styled('div')( typography, space, color )
34. No more ‘one ofs’ You have a signed contract with designers 34
35. Step #4 Implement Visual Components
36. Before building your own components library… Can I use an existing implementation?
37. Which UI components library match my needs? 37
38. Let’s demo React Material UI
39. If you choose to use an existing components implementation Make sure to: - Find the one that best match your design - Put all the customization in one place
40. If you choose to create a new library You probably still don’t have to start from scratch -> - Seperate Your Visual Layer - Combine standalone components implementations - Have an abstraction so you can control what is being used
41. Customization? How to make our component reusable 41
42. Customizing Visual Components Styles Props Render
43. Customizing Visual Components Styles Props Render
44. Customizing Visual Components Styles Props Render
45. Customizing Visual Components Styles Props Render
46. 46 Not every shared component should be part of the design library
47. Step #5 Share across the organization
48. One source of truth? To everyone in the organization 48
49. Who are the users? 1. Developers 2. Designers 3. Product \ Technical writers \ any other person
50. 50 Developers -> NPM Package
51. webpack.config.js module.exports = { … output: { path: path.resolve(__dirname, './dist/lib'), filename: 'index.js', library: 'MyDesignSystem', libraryTarget: 'commonjs' },
52. Version Management
53. Version Management with semantic-release package, releases are handled by commit messages. Examples: “fix(button): change over color“ => Patch Release “major(button): change property name“ => Major Release And you can also integrate it into your CI...
54. 54 Designers -> Graphic Resources
55. Code as source of truth Convert React to sketch https:/ /github.com/airbnb/react-sketchapp Convert HTML to sketch https:/ /github.com/brainly/html-sketchapp
56. 56 All users -> Website
57. Storybook is a UI component development environment Allows you to define ‘stories’ for your components Generate static website with live components https:/ /storybook-design-system.netlify.com/?path=/docs/design-system-intro--page
58. Let’s demo storybook > npx -p @storybook/cli sb init
59. What is a story? Each story represent one state of the component ▪ Render one component with different props ▪ Combine it with other components ▪ Build a form
60. React components for the Carbon Design System http://react.carbondesignsystem.com
61. ✓ Create Alignment ✓ Scope the project ✓ Define Building Blocks ✓ Implement the UI components ✓ Share across the organization What is next? We implemented a design system!
62. What’s next? Enhance the process
63. Designer - Developer handoff
64. Visual Tests as part of your CI /CD
65. Design Ops? Tools and processes for managing and scaling the design workflow 65
66. Design Ops Tools for design, collaboration, developer hands off Assets management Training and onboarding Research & user testing
67. To recap - The concept behind design systems - The steps for implementing a design system - Create Alignment - Scope the project - Define Building Blocks - Implement the UI components - Share across the organization - What’s next?
69. Useful links ▪ Design Systems: ▫ https:/ /www.carbondesignsystem.com ▫ https:/ /www.lightningdesignsystem.com ▫ https:/ /material.io/design/introduction/# ▪ Extra reading: ▫ https:/ /uxdesign.cc/can-design-systems-fix-the-relationship-between-designers-developers-eb12fc9329ab ▫ https:/ /medium.com/@nthgergo/lessons-learned-from-working-on-a-design-system-as-an-engineering-mana ger-2f199cd4aac2 ▫ http:/ /bradfrost.com/blog/post/atomic-web-design/ ▫ https:/ /www.designbetter.co/design-systems-handbook/introducing-design-systems ▫ https:/ /medium.com/amplify-design/operationalizing-design-operations-7846a23bc99b ▫ https:/ /medium.com/storybookjs/introducing-storybook-design-system-23fd9b1ac3c0 69
70. Thanks!! Any questions? You can find me at yael.balla@gmail.com www.linkedin.com/in/yael-oshri-balla-6b56686 70