Design Systems: Integration of Figma, Storybook and Angular

Transcript

1. Design Systems Integration of Figma, Storybook and Angular Konstantin Denerz @kdenerz Consultant
2. Design Systems – Integration of Figma, Storybook & Angular Konstantin Denerz
3. Design Systems – Integration of Figma, Storybook & Angular Enhance Collaboration Our goal How can we enhance the development of design systems with tools / frameworks?
4. Design Systems – Integration of Figma, Storybook & Angular DESIGN SYSTEM Patterns, Components & Styleguide
5. Design Systems – Integration of Figma, Storybook & Angular t Tokens Parts Design System t Typography t Colors t Elevations t States Layout Motion Design (Animations) https://ttlink.click/m3-design-system-impl-2023 First part
6. Design Systems – Integration of Figma, Storybook & Angular Design & Development Process Figma Storybook & Angular Dev Mode More time Design decisions Paper, PDF Unexpected results
7. Design Systems – Integration of Figma, Storybook & Angular Demo Use Case
8. Design Systems – Integration of Figma, Storybook & Angular DESIGN TOKENS
9. Design Systems – Integration of Figma, Storybook & Angular parameters, interface between design & development Design Tokens tokens.json tokens.css Web Application(s) Tools Figma Variables https://ttlink.click/m3-design-system-impl-2023 First part
10. Design Systems – Integration of Figma, Storybook & Angular VARIABLES🍿 Figma
11. Design Systems – Integration of Figma, Storybook & Angular Design Tokens to CSS - Per platform (Web, iOS, Android) - Custom transformations (Demo) - Filter - Templates Style Dictionary
12. Design Systems – Integration of Figma, Storybook & Angular STYLE DICTIONARY🍿 TOKEN TRANSFORMATION
13. Design Systems – Integration of Figma, Storybook & Angular Dev Mode • Inspect Design • Ready for development (Sections) • REM Unit • Variables / Design Tokens • Compare Changes (Preview Card / Dashboard) • Playground (Component) • Comments Figma
14. Design Systems – Integration of Figma, Storybook & Angular FIGMA DEV MODE🍿 Inspect, Ready for dev, Variables & Changes
15. Design Systems – Integration of Figma, Storybook & Angular • Development & testing in isolation • No dependency to navigation, authentication, components & backend API => mocking • Responsive design • Theming • Inspection • E2E testing with Cypress Storybook https://ttlink.click/tt-design-system-impl-storybook
16. Design Systems – Integration of Figma, Storybook & Angular STORYBOOK 🍿 Structure, Theming, Responsive & Controls
17. Design Systems – Integration of Figma, Storybook & Angular My Storybook Bridge Plugin (Developed By Thinktecture) Figma
18. Design Systems – Integration of Figma, Storybook & Angular STORYBOOK BRIDGE🍿 Figma Plugin by Thinktecture
19. Design Systems – Integration of Figma, Storybook & Angular https://ttlink.click/tt-figma-storybook-bridge-plugin Figma – Storybook Bridge Plugin (by Thinktecture)
20. Design Systems – Integration of Figma, Storybook & Angular Thirdparty • www.chromatic.com • Cloud • Visual Regression Tests • Review • Github Integration • Free / Commercial => Consulting Chromatic
21. Design Systems – Integration of Figma, Storybook & Angular Conclusion
22. Design Systems – Integration of Figma, Storybook & Angular Thanks for your attention! ttlink.click/ux-ui