Design system and Typescript in React and React-Native projects

This is a story on how typescript helped us to pass from one design system to another in React-Native project. You can find here some tips on the design system implementation. And how Typescript could possibly help you with it and save hours of work in the future.

Transcript

1. How TypeScript helped us to pass from one design system to another in React-Native project by Daria KHMEL Daria KHMEL Front-End Developer daria_khmel
2. About me In IT since 2014 Web-Developer since 2016 2016-2018 @ Theodo 2018-2019 @ BAM 2019-... @ Dailymotion Daria KHMEL Front-End Developer daria_khmel
3. Plan Introduction / the context ( 5 min ) Design system integration ( 8 min ) The problem / How to move from one Design System to another using Typescript ( 8 min )
4. Plan Introduction / the context ( 5 min ) Design system integration ( 8 min ) The problem / How to move from one Design System to another using Typescript ( 8 min )
5. How we used to work with a client at BAM? I need a MVP (minimum viable product) in 12 weeks. From scratch Archi Dev Dev Dev PO Designer No problem! We’ll do this in a best possible way so that even after the end, your developers could continue the project I made the mock-ups and created a design system!
6. How we used to work with a client at BAM? Archi Dev Dev Dev PO Designer Backlog Mock-ups + Design system RN application 1 week 12 weeks x Mock-ups + Design system
7. Plan Introduction / the context ( 5 min ) Design system integration ( 8 min ) The problem / How to move from one Design System to another using Typescript ( 8 min )
8. What is a Design System? Visual Language • Brand (logos) • Typography (fonts + sizes + styles of fonts) • Color Palette • Voice (it means if the site overall is serious, playful, friendly, etc.. in terms of used wordings) • Iconography • Forms (like pop-ups) • Buttons • Spacing • ...
9. How to integrate a Design System to a React-Native Project? “It takes talent to build mobile applications, but it takes style to make them great.”
10. “Sites are systems, not pages. The sooner we stop counting them as pages, the better.” How to integrate a Design System to a React-Native Project?
11. Project’s Architecture │── src │ ├──components │ ├──... │ └──theme import theme from 'src/theme'; const textStyle = { ...theme.fonts.title, color: theme.colors.primary, marginBottom: 6 * theme.margins.unit, }
12. What we’ve learnt ? 1) Keep all the styleguide elements together
13. Colors integration
14. What we’ve learnt ? 1) Keep all the styleguide elements together 2) Don’t use colors in names
15. Fonts integration
16. What we’ve learnt ? 1) Keep all the styleguide elements together 2) Don’t use colors in names 3) Name fonts configurations by its purpose
17. Spacings integration
18. What we’ve learnt ? 1) Keep all the styleguide elements together 2) Don’t use colors in names 3) Name fonts configurations by its purpose 4) Limit margin units
19. Forms integration
20. What we’ve learnt ? 1) Keep all the styleguide elements together 2) Don’t use colors in names 3) Name fonts configurations by its purpose 4) Limit margin units 5) Use forms
21. What else? No magic numbers!
22. What we’ve learnt ? 1) Keep all the styleguide elements together 2) Don’t use colors in names 3) Name fonts configurations by its purpose 4) Limit margin units 5) Use forms 6) No magic numbers!
23. Plan Introduction / the context ( 5 min ) Design system integration ( 8 min ) The problem / How to move from one Design System to another using Typescript ( 8 min )
24. How we used to work with a client at BAM? Archi Dev Dev Dev PO Designer 1 week N weeks x We continue the projet!
25. How we used to work with a client at BAM? Archi Dev Dev Dev PO Designer 1 week N weeks x We continue the projet! But we have a new designer and a new design system! sign in new pages
26. How to implement the new Design System? keeping and using the old one 1) Type Everything!
27. How to implement the new Design System? - IDeprecatedColors - IDeprecatedFonts - IDeprecatedMargins keeping and using the old one - IStyleguideColors - IStyleguideFonts - IStyleguideMargins 2) Create IDeprecated and IStyleguide Types
28. How to implement the new Design System? keeping and using the old one 3) Export both objects
29. How to implement the new Design System? keeping and using the old one
30. How to implement the new Design System? keeping and using the old one 4) Remove one by one the properties from deprecatedObjects and from deprecatedTypes. TypeScript will do the rest!
31. How to implement the new Design System? keeping and using the old one 1) Type everything ! 2) Create Objects of deprecated and new types 3) Export both objects 4) Remove one by one the properties from deprecatedObjects and from deprecatedTypes. Typescript will do the rest! 5) Make your designer/PO know about what is left
32. Design system + Typescript / Pros and Cons Pros Cons + Visibility (for both Devs/Designer) + No code duplicated + Useful when design changes + Useful for storybook ! + Easy and intuitive - Expensive to implement into the existing project - Compatible just with React-Native and React with Css-In-Js projects - Requires all team-members training - Requires some creativity to name theme properties
33. Thanks. Questions?