Slide 1
Slide 1 text
Design Systems
Integration of Figma, Storybook and Angular
Konstantin Denerz
@kdenerz
Consultant
Slide 2
Slide 2 text
Design Systems – Integration of Figma, Storybook & Angular
Konstantin Denerz
Slide 3
Slide 3 text
Design Systems – Integration of Figma, Storybook & Angular
Enhance Collaboration
Our goal
How can we enhance the development of
design systems with tools / frameworks?
Slide 4
Slide 4 text
Design Systems – Integration of Figma, Storybook & Angular
DESIGN SYSTEM
Patterns, Components & Styleguide
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Design Systems – Integration of Figma, Storybook & Angular
Design & Development
Process
Figma Storybook & Angular
Dev Mode
More time
Design decisions
Paper, PDF
Unexpected results
Slide 7
Slide 7 text
Design Systems – Integration of Figma, Storybook & Angular
Demo Use Case
Slide 8
Slide 8 text
Design Systems – Integration of Figma, Storybook & Angular
DESIGN TOKENS
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Design Systems – Integration of Figma, Storybook & Angular
VARIABLES🍿
Figma
Slide 11
Slide 11 text
Design Systems – Integration of Figma, Storybook & Angular
Design Tokens to CSS
- Per platform (Web, iOS, Android)
- Custom transformations (Demo)
- Filter
- Templates
Style Dictionary
Slide 12
Slide 12 text
Design Systems – Integration of Figma, Storybook & Angular
STYLE DICTIONARY🍿
TOKEN TRANSFORMATION
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Design Systems – Integration of Figma, Storybook & Angular
FIGMA DEV MODE🍿
Inspect, Ready for dev, Variables & Changes
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
Design Systems – Integration of Figma, Storybook & Angular
STORYBOOK 🍿
Structure, Theming, Responsive & Controls
Slide 17
Slide 17 text
Design Systems – Integration of Figma, Storybook & Angular
My Storybook Bridge Plugin (Developed By Thinktecture)
Figma
Slide 18
Slide 18 text
Design Systems – Integration of Figma, Storybook & Angular
STORYBOOK BRIDGE🍿
Figma Plugin by Thinktecture
Slide 19
Slide 19 text
Design Systems – Integration of Figma, Storybook & Angular
https://ttlink.click/tt-figma-storybook-bridge-plugin
Figma – Storybook Bridge Plugin (by Thinktecture)
Slide 20
Slide 20 text
Design Systems – Integration of Figma, Storybook & Angular
Thirdparty
• www.chromatic.com
• Cloud
• Visual Regression Tests
• Review
• Github Integration
• Free / Commercial
=> Consulting
Chromatic
Slide 21
Slide 21 text
Design Systems – Integration of Figma, Storybook & Angular
Conclusion
Slide 22
Slide 22 text
Design Systems – Integration of Figma, Storybook & Angular
Thanks for your attention!
ttlink.click/ux-ui