The document discusses building a cross-framework design system, emphasizing the importance of consistency and speed in development. It outlines steps to get started, including auditing existing projects and standardizing tools like Webpack and Sass. The ideal file structure for the design system is also highlighted, along with a reference to an open-source GitHub boilerplate.

1. Building a cross framework
design system
Software Engineer
Ambassador
Michael Schinis
@ Trouva
@ Algolia

3. What is a design system?
Hipster terminology of design language

4. Why is it important?
• Iterate faster
• Visual and functional consistency
• Engineering consistency

5. Getting started
• Audit existing frontend projects
• Identify common tooling - framework, css, css-
in-js..
• Standardise, standardise, standardise

6. Audit existing projects
• Ember 3.x
• React 16.x

7. Identify common tooling
• Webpack
• Ember cli
• SASS
• Styled JSX

8. Standardise
• Choose a standard and go with it
• Rewrite Styled JSX to SASS

9. Our ideal design system

10. File structure
Source files Build files Publishing pipelines

11. Webpack configuration

12. Webpack configuration

13. Webpack output

14. Webpack configuration

15. Sass it up

16. Webpack output

17. Implementing

18. Implementing

19. Local development

20. Open Source
github.com/mschinis/design-system-boilerplate✨✨

21. Thank you!
Software Engineer
Ambassador
Michael Schinis
@ Trouva
@ Algolia