Managing Design Systems (Antwerp 2024)

Transcript

1. © Copyright 2024 • Directed Edges LLC Managing Design Systems By Nathan Curtis for SmashingConf Antwerp Belgium October 30, 2024 From features and releases to roadmaps and backlogs
2. © Copyright 2024 • Directed Edges LLC About me Fairfax, VA USA (near Washington, DC) Design system consultant, ~85 systems since 2006 @nathan curtis on LinkedIn, Twitter/X a Hi, I’m Nathan
3. © Copyright 2024 • Directed Edges LLC Medium @nathan curtis a
4. © Copyright 2024 • Directed Edges LLC specsplugin.com
5. © Copyright 2024 • Directed Edges LLC Who am I? I’m a design system architect I ❤️ tokens and UI components
6. © Copyright 2024 • Directed Edges LLC Who am I? I’m a design system architect that and designs codes
7. © Copyright 2024 • Directed Edges LLC What role do I play? I’m a design system architect ...that system work manages
8. © Copyright 2024 • Directed Edges LLC What am I called? Product manager? Project manager?
9. © Copyright 2024 • Directed Edges LLC What am I responsible for? Drive strategy Ensure quality Deliver releases Align stakeholders Manage workflows Prioritize roadmaps Foster collaboration Develop individual skills
10. © Copyright 2024 • Directed Edges LLC How does it work?
11. © Copyright 2024 • Directed Edges LLC How do we produce robust, high-quality UI components?
12. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Releases Workflow Plan Design Spec Code Figma asset Initiatives Roadmap Boards?
13. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on ?
14. © Copyright 2024 • Directed Edges LLC Features / Things that design systems produce Workflow process Training curriculum Strategy and plans Analytics reports Design tokens UI components UX patterns Content guidance
15. © Copyright 2024 • Directed Edges LLC Features / Things that design systems produce Workflow process Training curriculum Strategy and plans Analytics reports Design tokens UI components UX patterns Content guidance Not features Features Today’s focus
16. Design tokens UI components UX patterns Content guidance © Copyright 2024 • Directed Edges LLC Features / Team capacity Workflow process Training curriculum Strategy and plans Analytics reports Not features Features
17. © Copyright 2024 • Directed Edges LLC Feature Something , and as a system asset. made documented released attributes ˜ Published in 1+ ˜ Useful to and/or and/or ˜ Implicitly or explicitly librariex designers developers otherx versioned
18. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Workflow ?
19. © Copyright 2024 • Directed Edges LLC Tabs Checkbox Radio button Text input Dropdown Alert Button Breadcrumb Accordion {Title} {Details} {Label} {Label}
20. © Copyright 2024 • Directed Edges LLC Design Code Workflow / Steps {Title} {Details} {Label} {Label}
21. © Copyright 2024 • Directed Edges LLC Design Code Workflow / Discipline {Title} {Details} {Label} {Label} R o l e Design Developer Product/project Content Specialist “Multiple assignee”
22. {Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Design Code Document Publish Design ≠ docs Producing docs content is different than getting the design approved. Workflow / Discovery, 2016 R o l e Design Developer Product/project Content Specialist “Multiple assignee” NEW NEW
23. {Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Document Publish Scope a plan Audits, exploration, and agreeing scope as a milestone. Workflow / Morningstar, 2017 NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”
24. {Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Document Publish Scope a plan Audits, exploration, and agreeing scope as a milestone. Workflow / Morningstar, 2017 NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”
25. {Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Accessibility Document UI toolkit Publish External collaborator Accessibility requires a review from separate team of experts. Workflow / Target, 2017 NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”
26. {Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Accessibility Document UI toolkit Publish External collaborator Accessibility requires a review from separate team of experts. Workflow / Target, 2017 Late changes Finalize the design asset after the code is final, to ensure alignment. NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”
27. Publish Document Harden Test Accessibility Code UI Toolkit Production Design Discover © Copyright 2024 • Directed Edges LLC Workflow / REI, 2018 Ten steps? That’s... a lot. NEW NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”
28. Publish Document Harden Test Accessibility Code UI Toolkit Production Design Discover © Copyright 2024 • Directed Edges LLC Specifications For the first time, specs (for handoff) ≠ design (approved by design org) Workflow / REI, 2018 NEW NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”
29. Publish Document Harden Test Accessibility Code UI Toolkit Production Design Discover © Copyright 2024 • Directed Edges LLC Specifications For the first time, specs (for handoff) ≠ design (approved by design org) Testing assignee Engineers assigned testing (cases, docs, etc) as separate task. Workflow / REI, 2018 NEW NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”
30. Design production Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Workflow / Stable workflow, since 2020 Role Design Developer Product/project Content Specialist “Multiple assignee”
31. © Copyright 2024 • Directed Edges LLC Workflow / Assignee Plan Design Specification Code Code docs Figma asset Design docs Anyone, really Designer Designer Developer Developer Content or Designer Designer Content or Typical assignee Task Must have DRI (Directly Responsible Individual)
32. © Copyright 2024 • Directed Edges LLC Workflow / Outputs Plan Design Specification Code Code docs Figma asset Design docs Audits, explorations, and scope Detailed design (in Figma) Detailed specs (in a Figma document) Code package(s) Code docs, possibly within a code package Figma asset(s) published in the library Doc site content Output Task
33. production © Copyright 2024 • Directed Edges LLC Workflow / Defining done Decide not to pursue or set scope, ready to start Done when Design approved by design stakeholders Handed off to assignees, agreed on API provisionally Figma assets tested, reviewed, ready to publish Code tested, reviewed, merged, ready to release Code docs reviewed and ready to publish Design docs reviewed and ready to publish Plan Design Specification Code Code docs Figma asset Design docs Task Feature ready to release?
34. © Copyright 2024 • Directed Edges LLC Workflow / Increasing costs assignee effort Plan Design Specification Code Code docs Figma asset Design docs Task Assets getting complicated Not vanilla HTML & CSS anymore -> ->
35. © Copyright 2024 • Directed Edges LLC Workflow / Reducing costs assignee effort Plan Design Specification Code Code docs Figma asset Design docs Task Automation Assets getting complicated Not vanilla HTML & CSS anymore Eased authoring <- <- -> ->
36. © Copyright 2024 • Directed Edges LLC Workflow / Reviewers assignee effort reviewer effort Plan Design Specification Code Code docs Figma asset Design docs Task Ensure broad participation
37. © Copyright 2024 • Directed Edges LLC Workflow / Reviewers assignee effort reviewer effort Plan Design Specification Code Code docs Figma asset Design docs Task Ensure broad participation Ensure right people review each output Accessibility specialist Content designer
38. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Plan ?
39. © Copyright 2024 • Directed Edges LLC Plan objective Understand what we want to make, why, and if it’s worth it Activities Audit existing cases and comparative examples Always Sometimes Sometimes Design and/or explorations code Other research
40. © Copyright 2024 • Directed Edges LLC Plan / Scope Design
 What to explore? Anatomy 
 What might it include? Props 
 How might it work? Other areas and considerations 30-60 min
41. © Copyright 2024 • Directed Edges LLC Plan / Decision Yes, add it to the system -> Communicate to stakeholders -> Confirm the scope -> Assign remaining tasks -> Assign to release -> Initiate next task No, will not support -> Communicate to stakeholders -> Close task
42. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Design ?
43. © Copyright 2024 • Directed Edges LLC Design objective Fully explore and validate a design solution outputs Figma concepts, iterated
44. © Copyright 2024 • Directed Edges LLC Start Make Test Share Review Deliver Design
45. © Copyright 2024 • Directed Edges LLC Files from template Include examples from products Styled with design tokens Content examples Behaviors and states Interactive prototypes Responsiveness Variant configurations Sizing and density Examples in-situ to stress test across products and themes Accessibility Usability With assigned developer(s) With system team With design community With design head / director With key adopting team(s) By designer peer(s) By assigned developer(s) By accessibility Final edits Transfer to begin specification Start Make Test Share Review Deliver Design
46. © Copyright 2024 • Directed Edges LLC Files from template Add examples from products Examples with real content Styled with design tokens ⚠️ Behaviors and states ⚠️ Interactive prototypes ⚠️ Responsiveness ⚠️ Variant configurations ⚠️ Sizing and density Examples in-situ to stress test across products and themes Accessibility Usability With assigned developer(s) With design head / director ⚠ With system team With design community With key adopting team(s) By assigned developer(s) By accessibility ⚠ By designer peer(s) By system team Final edits Transfer to begin specification Start Make Test Share Review Deliver Design Product designers Avoid or do Less Than / Minimal, the as, or system designers. Same More than
47. © Copyright 2024 • Directed Edges LLC Files from template Add examples from products Examples with real content Styled with design tokens ⚠️ Behaviors and states ⚠️ Interactive prototypes ⚠️ Responsiveness ⚠️ Variant configurations ⚠️ Sizing and density Examples in-situ to stress test across products and themes Accessibility Usability With assigned developer(s) With design head / director ⚠ With system team With design community With key adopting team(s) By assigned developer(s) By accessibility ⚠ By designer peer(s) By system team Final edits Transfer to begin specification Start Make Test Share Review Deliver Design Do you usability test every desig system UI component you make? REALLY? Be honest. Product designers Avoid or do Less Than / Minimal, the as, or system designers. Same More than
48. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Spec ?
49. Specification © Copyright 2024 • Directed Edges LLC nt name} Anatomy 1 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} 2 {Layer name} {Name} : {Style/token} {Name} : {Style/token} {Name} : {Value} 3 {Layer name} {Name} : {Value} {Name} : {Style/token} {Name} : {Style/token} 4 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} # # # # # # # # # # # # Properties {Variant property name} {Property value} (default) {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Boolean property name} Property type : Boolean Default : {true/false} Associated layers : {Layer name} {Layer name} {Layer name} Layout and spacing Spacing {Layer name} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Layer name} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} 16 16 16 16 16 16 Overflow {Layer name} {Description} {Layer name} {Description} Touch targets Accessibility Screen reading For when the member is using a screen reader, including how elements should be identified, read, and in what order. ESDS Text input Reading : [ESDS Form label]. [Icon] [value/ placeholder], [role]. Example : “Cost rate, the internal cost that this person incurs on your business. Dollar 100, [role].” Role : text box {Layer name} Reading : {Reading} Example : {Example} Role : {Role} Focus order ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} # # # # # # # # # # # # Announced order ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} # # # # # # # Component tok ens {Subsection title} Tok en Alias Figma style Value 00 {Value} $ esds-... $ esds-... {Figma style} {Description} 00 {Value} $ esds-... $ esds-... {Figma style} {Description} Aa {Value} $ esds-... $ esds-... {Figma style} {Description} {Value} $ esds-... $ esds-... {Figma style} {Description} {Value} $ esds-... $ esds-... {Figma style} {Description} {Value} $ esds-... $ esds-... {Figma style} {Description} {Subsection title} Tok en Alias Figma style Value 00 {Value} $ esds-... $ esds-... {Figma style} 00 {Value} $ esds-... $ esds-... {Figma style} 00 {Value} $ esds-... $ esds-... {Figma style} 00 {Value} $ esds-... $ esds-... {Figma style} {Subsection title} Tok en {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... Version history Version #.#.# • MMM DD, YYYY New features í {Descriptioná í {Descriptioná í {Description} Enhancements í {Descriptioná í {Descriptioná í {Description} Fixes í {Descriptioná í {Descriptioná í {Description} Version #.#.# • MMM DD, YYYY New features í {Descriptioná í {Descriptioná í {Description} Enhancements í {Descriptioná í {Descriptioná í {Description} Fixes í {Descriptioná í {Descriptioná í {Description} or or, simply “ Design spec” “ Spec” A document that describes how an interface is composed, configured, visually designed, behaves and more, whether a component, page or something else.
50. production Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Specs / Handoff as transition Role Design Developer Product/project Content Specialist “Multiple assignee” Handoff Cross-functional assignees
51. © Copyright 2024 • Directed Edges LLC Design API Code API https://mui.com/material-ui/api/text-field/
52. Anatomy {Title} {Details} Show less {Label} {Label} 1 2 3 4 5 6 7 8 ESDSV Alert Width: ESDS Sizing/ platform/iOS default width (343) Border weight: 2 Border radius: ESDS Shape/ border radius/module (4) 1 Decorative Icon Depends on: ESDS-V Icon Name: <Instance name> Size: 20x20 2 Title Text color: ESDS Color/ Text/Primary (#0E1114) Text style: Heading/5 3 Icon button layout container Height: ESDS Sizing/ icon/small (16) Width: ESDS Sizing/ icon/small (16) 4 Dismiss Icon Depends on: ESDS-V Icon Name: <Instance name> Size: 16x16 Color: Primary 5 Details Text color: ESDS Color/ Text/Primary (#0E1114) Text style: Body/Small 6 Details drawer Depends on: ESDSV Details drawer State: Open 7 Action area Depends on: ESDSV Alert actions Actions: Button + Link 8 P rop erties Typ e {Title} {Details} Show less {Label} {Label} B asic ESDSV Alert Background color: ESDS Color/ Alert/Basic/Background (#F 0F 1F 1) Border color: ESDS Color/ Alert/Basic/Element (#A6ACB0) Decorative Icon Color: Secondary {Title} {Details} Show less {Label} {Label} Inf ormational ESDSV Alert Background color: ESDS Color/ Alert/Info/Background (#EDF 0F B) Border color: ESDS Color/ Alert/Info/Element (#0E68 D4) Decorative Icon Color: Info {Title} {Details} Show less {Label} {Label} Success ESDSV Alert Background color: ESDS Color/ Alert/Success/Background (#E6F DEB) Border color: ESDS Color/ Alert/Success/Element (#097 D33) Decorative Icon Color: Success {Title} {Details} Show less {Label} {Label} Error ESDSV Alert Background color: ESDS Color/ Alert/Error/Background (#F CF 0EF ) Border color: ESDS Color/ Alert/Error/Element (#D9 09 36) Decorative Icon Color: Error {Title} {Details} Show less {Label} {Label} W arning ESDSV Alert Background color: ESDS Color/ Alert/Warning/Background (#F CEF DA) Border color: ESDS Color/ Alert/Warning/Element (#78 5F 07 ) Decorative Icon Color: Warning L ayout and sp acing Typ e: B asic {Title} {Details} Show less {Label} {Label} 8 16 16 16 16 ESDSV Alert Direction: Horizontal Alignment: Top left V ertical resizing: Hug Horizontal resizing: F ixed Item spacing: ESDS Space/ item- spacing/half- x (8 ) Padding: ESDS Space/ padding/1x (16) {Title} {Details} Show less {Label} {Label} {Title} {Details} Show less {Label} {Label} 16 ]-[ Direction: V ertical Alignment: Top left V ertical resizing: Hug Horizontal resizing: F ill Item spacing: ESDS Space/ item- spacing/1x (16) {Title} {Details} Show less {Label} {Label} {Title} {Details} Show less 12 12 ]-[ Direction: V ertical Alignment: Top left V ertical resizing: Hug Horizontal resizing: F ill Item spacing: ESDS Space/ item- spacing/three-q uarter- x (12) {Title} {Details} Show less {Label} {Label} {Title} 24 ]-[ Direction: Horizontal Alignment: Top right V ertical resizing: Hug Horizontal resizing: F ill Item spacing: ESDS Space/ item- spacing/one- and- a- half- x (24) © Copyright 2024 • Directed Edges LLC Specs / Alig ning AP I
53. © Copyright 2024 • Directed Edges LLC Specs / specsplugin.com
54. Anatomy section {Title} {Details} Show less {Label} {Label} 1 2 3 4 5 6 7 8 ESDSV Alert Width: ESDS Sizing/ platform/iOS default width (343) Border weight: 2 Border radius: ESDS Shape/ border radius/module (4) 1 Decorative Icon Depends on: ESDS-V Icon Name: <Instance name> Size: 20x20 2 Title Text color: ESDS Color/ Text/Primary (#0E1114) Text style: Heading/5 3 Icon button layout container Height: ESDS Sizing/ icon/small (16) Width: ESDS Sizing/ icon/small (16) 4 Dismiss Icon Depends on: ESDS-V Icon Name: <Instance name> Size: 16x16 Color: Primary 5 Details Text color: ESDS Color/ Text/Primary (#0E1114) Text style: Body/Small 6 Details drawer Depends on: ESDSV Details drawer State: Open 7 Action area 8 Type {Title} {Details} Show less {Label} {Label} Basic ESDSV Alert Background color: ESDS Color/ Alert/Basic/Background (# F0 F1 F1) Border color: ESDS Color/ Alert/Basic/Element (# A6 ACB0) Decorative Icon Color: Secondary {Title} {Details} Show less {Label} {Label} In formational ESDSV Alert Background color: ESDS Color/ Alert/Info/Background (#ED F0 FB) Border color: ESDS Color/ Alert/Info/Element (#0E6 8D4) Decorative Icon Color: Info {Title} {Details} Show less {Label} {Label} Success ESDSV Alert Background color: ESDS Color/ Alert/Success/Background (#E6 FDEB) Border color: ESDS Color/ Alert/Success/Element (#0 97D33) Decorative Icon Color: Success {T {D Sh { Error ESDSV Alert Background color: ESDS Colo Border color: ESDS Color/ Ale Decorative Icon Color: Error Dismissable {Title} {Details} Show less {Label} {Label} Property type: Boolean Default: false Associated layers: Dismiss Icon Details drawer {Title} {Details} Show less {Label} {Label} Property type: Boolean Default: false Associated layers: Details drawer Action area {Title} {Details} Show less {Label} {Label} Property type: Boolean Default: false Associated layers: Action area Content are {T {D Sh { Property type: Boolean Default: false Associated layers: Content area Properties section {Title} {Details} Show less {Label} {Label} 8 16 16 16 16 ESDSV Alert Direction: Horizontal Alignment: Top left Vertical resizing: Hug Horizontal resizing: Fixed Item spacing: ESDS Space/ item-spacing/half-x ( 8) Padding: ESDS Space/ padding/1x (16) {Title} {Details} Show less {Label} {Label} {Title} {Details} Show less {Label} {Label} 16 ]-[ Direction: Vertical Alignment: Top left Vertical resizing: Hug Horizontal resizing: Fill Item spacing: ESDS Space/ item-spacing/1x (16) {Title} {Details} Show less {Label} {Label} {Title} {Details} Show less 12 12 ]-[ Direction: Vertical {Title} {Details} Show less {Label} {Label} {Title} 24 ]-[ Direction: Horizontal Layout and spacing section Text 2 Opacity : token-studio-opacity 87% Text color : color-text-primary #0E1114 Text align : Right Font name : token-studio-font-family Arial Bold Font size : token-studio-font-size 16. 97 Text decoration : token-studio-text-decoration Underline Letter spacing : token-studio-letter-spacing 0.1 Line height : token-studio-line-height 22 Paragraph spacing : token-studio-paragraph-spacing 35 Paragraph indent : 8. 79 Text case : token-studio-text-case Upper Rectangle 4 Opacity : token-studio-opacity 87% Height : 3 8. 89 Width : 87.6 7 Background color : color-background-secondary # F0 F1 F1 Border color : color-element-red #D 90 936 Border top weight : shape-border-width-top 0.2 Border bottom weight : shape-border-width-bottom 0.3 Border left weight : shape-border-width-left 0.1 Border right weight : shape-border-width-right 0.4 Border radius : shape-corner-default 6 Drop shadow : token-studio-drop-shadow 2px 3px 4px 5px # 852121 Frame 5 Background color : color-element-red #D 90 936 Top left radius : shape-corner-top-left 16 Top right radius : shape-corner-top-right 12 Bottom left radius : shape-corner-bottom-left 14 Bottom right radius : shape-corner-bottom-right 10 Variables Name Applied as Applied to ESDS Color/ Alert/Basic/Background Background color ESDSV Alert ESDS Color/ Alert/Basic/Element Border color ESDSV Alert ESDS Color/ Alert/Error/Background Background color ESDSV Alert ESDS Color/ Alert/Error/Element Border color ESDSV Alert ESDS Color/ Alert/Info/Background Background color ESDSV Alert ESDS Color/ Alert/Info/Element Border color ESDSV Alert ESDS Color/ Alert/Success/Background Background color ESDSV Alert ESDS Color/ Alert/Success/Element Border color ESDSV Alert ESDS Color/ Alert/Warning/Background Background color ESDSV Alert ESDS Color/ Alert/Warning/Element Border color ESDSV Alert ESDS Color/ Text/Primary Text color Details , Title ESDS Shape/ border radius/module Border radius ESDSV Alert ESDS Sizing/ icon/small Height Icon button layout container ESDS Sizing/ icon/small Width Icon button layout container ESDS Sizing/ platform/iOS default width Width ESDSV Alert ESDS Space/ item-spacing/1x Item spacing ]- [ ESDS Space/ item-spacing/half-x Item spacing ESDSV Alert ESDS Space/ item-spacing/one-and-a-half-x Item spacing ]- [ ESDS Space/ item-spacing/three- quarter-x Item spacing ]- [ ESDS Space/ padding/1x Padding ESDSV Alert Detected variables , styles and To kens Studio to kens
55. © Copyright 2024 • Directed Edges LLC Specs / During design, handoff, or final Figma asset production
56. Design production Scoping Expressing scope as (very) rough anatomy and API Critique Cross-functional reviews of emerging design Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Specs / Involving developers earlier and often Handoff Role Design Developer Product/project Content Specialist “Multiple assignee”
57. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Code ?
58. © Copyright 2024 • Directed Edges LLC Create code branch Generate file(s) Source reusable code Draft API Obtain API feedback Code HTML, CSS, JavaScript Create visual test cases Document API Create usage examples Update dependent code Browsers & devices Functional Unit tests Accessibility (manual) Accessibility (automated) Visual regression tests With assigned designer(s) With system team With developer community With key adopting team(s) By developer peer(s) By assigned designer(s) By community developer(s) By accessibility Final edits Write changelog Merge pull request Start Make Test Share Review Deliver Code
59. © Copyright 2024 • Directed Edges LLC Create code branch Generate file(s) Source reusable code Draft API Obtain API feedback Create visual test cases Document API Create usage examples Code HTML, CSS, JavaScript Update dependent code Browsers & devices Functional Accessibility (manual) Accessibility (automated) Visual regression tests Unit tests With assigned designer(s) With system team With developer community With key adopting team(s) By developer peer(s) By assigned designer(s) By community developer(s) By accessibility Final edits Write changelog Merge pull request 5 min 2 min ...when? 3 min Start Make Test Share Review Deliver Code
60. © Copyright 2024 • Directed Edges LLC Create code branch Generate file(s) Source reusable code Draft API Obtain API feedback Code HTML, CSS, JavaScript Create visual test cases Document API Create usage examples Update dependent code Browsers & devices Functional Unit tests Accessibility (manual) Accessibility (automated) Visual regression tests With assigned designer(s) With system team With developer community With key adopting team(s) By developer peer(s) By assigned designer(s) By community developer(s) By accessibility Final edits Write changelog Merge pull request Start Make Test Share Review Deliver Code Technical design
61. © Copyright 2024 • Directed Edges LLC Code / Technical design Developer expresses API Start with template Format as code Does designer see it? Shared in a common place?
62. Design production Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Code / Collaborative moments after handoff Handoff Role Design Developer Product/project Content Specialist “Multiple assignee” (V)QA Reviews & testing
63. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Figma asset ?
64. © Copyright 2024 • Directed Edges LLC Create a branch in library file Create a page from template Integrate finalized design Draft API Obtain API feedback Compose anatomy and layers Apply visual style Create configurable variants Configure nested components Create visual test cases Create usage examples Update dependent assets Descriptions and metadata Anatomy and naming Property combinations Content (text/images) flow
 Layout resizing Visual style variation, modes Composition in situ Composition of slots Varying nested configurations Behaviors Common overrides With assigned designer(s) With assigned developer(s) With system team With design community With key adopting team(s) By assigned developer(s) By assigned designer(s) By community designer(s) By design lead Final edits Write changelog Merge branch (Publishable) Figma asset Start Make Test Share Review Deliver
65. © Copyright 2024 • Directed Edges LLC Create a branch in library file Create a page from template Integrate finalized design Draft API Obtain API feedback Compose anatomy and layers Apply visual style Create configurable variants Configure nested components Create visual test cases Create usage examples Update dependent assets Descriptions and metadata Anatomy and naming Property combinations Content (text/images) flow
 Layout resizing Visual style variation, modes Composition in situ Composition of slots Varying nested configurations Behaviors Common overrides With assigned designer(s) With assigned developer(s) With system team With design community With key adopting team(s) By assigned developer(s) By assigned designer(s) By community designer(s) By design lead Final edits Write changelog Merge branch (Publishable) Figma asset Start Make Test Share Review Deliver You plan Figma assets?
66. © Copyright 2024 • Directed Edges LLC Figma asset / Architect Figma components without building them Figma Props panel components
67. © Copyright 2024 • Directed Edges LLC Figma asset / Architect Figma components without building them ESDS Card Mode Light Size Medium Action(s)? Custom areas None Card Container Type Primary State Initial Card Image Aspect ratio 16:9 Aspect ratio Cover Card Text Metadata? Description? Card Actions Variant Single Button Figma Props panel components Designers Developers
68. © Copyright 2024 • Directed Edges LLC Figma asset / Explore API alternatives ESDS Card Mode Light Size Medium Action(s)? Custom areas None Card Container Type Primary State Initial Card Image Aspect ratio 16:9 Aspect ratio Cover Card Text Metadata? Description? Card Actions Variant Single Button ESDS Card Contained? Custom areas None Action(s)? Container Surface Light primary State Initial Image Aspect ratio 16:9 Text Size Medium Metadata? Description? Actions Variant Button Size Medium Should subcomponents include Card in the name? Nathan Curtis At what level do we expose surface color? Nathan Curtis Is description shown or hidden by default? Nathan Curtis Figma Props panel components API explorations Alternative 1 Alternative 2 Alternative 3 Are actions required, and is that exposed at the top level? Nathan Curtis
69. © Copyright 2024 • Directed Edges LLC Create a branch in library file Create a page from template Integrate finalized design Draft API Obtain API feedback Compose anatomy and layers Apply visual style Create configurable variants Configure nested components Create visual test cases Create usage examples Update dependent assets Descriptions and metadata Anatomy and naming Property combinations Content (text/images) flow
 Layout resizing Visual style variation, modes Composition in situ Composition of slots Varying nested configurations Behaviors Common overrides With assigned designer(s) With assigned developer(s) With system team With design community With key adopting team(s) By assigned developer(s) By assigned designer(s) By community designer(s) By design lead Final edits Write changelog Merge branch (Publishable) Figma asset Start Make Test Share Review Deliver You test Figma assets?
70. © Copyright 2024 • Directed Edges LLC Figma asset / Testing 1. Metadata 1.1 Name Is it named consistently with code and web-based documentation? 1.2 Namespace Is it namespaced as ESDS-? 1.3. Description Does it include a one sentence introduction and any important "Use Whens? 1.4 Status Is status up-to-date with commensurate code version (X.X.X) and stability (Stable vs Experimental)? 2. Anatomy 2.1 Layer name Are element names consistent with specification and code? 2.2 Layer Are layer names formatted as actual names in sentence case, not “Frame ###”? 2.3 Layer shorthand Are naming conventions applied, such as using space between (]-[) for layers applying only autolayout or emoji for indicators like edi 2.4 Nested component names Are nested components named descriptively (such as Dismiss Icon) instead of nested component's default name (Icon)? 2.5 Default visiblity Are layers shown or hidden appropriately, including layers within hidden layers? 3. Color 3.1 Color accuracy Are background, text, and stroke colors applied accurately?? 3.2 Color styles Is every fill, stroke, solid color and gradient color applying a color style instead of a hardcoded value, when possible? 3.3 Color specificity Is each style applying the most semantically specific (Text > Link > On Dark) instead of generic (Palette > Blue > 50) style? 3.4 Hardcoded properties Where a hardcoded value is used, has it been discussed and agreed upon? 3.5 Buried Colors Are "buried" hardcoded colors - applied to shadow effects and other non-styled locations - applied accurately? 4. Text 4.1 Text styles Is each text layer associated with a defined text style? 4.2 Non-text style properties Are properties not styles - list style, vertical alignment, and horizontal alignment - accurately applied or omitted? 5. Properties 5.1. Property names Are properties named and formatted correctly? 5.2. Property order Are properties ordered sensibly, such as by priority, alphabetical, related sets, or documented order across components? 5.3. Option names Are property options named and formatted correctly? 5.4. Option order Are options ordered correctly, such as by scale order ( small then medium then large) or alphabetical? 5.5. Default option Diam quis enim loborti scelerxq. Cras semper auctor neque vitae. Quis amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna molestie at elementum eu. Sit amet consectetur adipiscing elit duis tristique. Eget felis eget nunc lobortis mattis aliquam A Custom Link Label {Title} {Details} {Button} {Title} {Label} C o n t e n t C o l l i s i o n W R O N G C O N T E N T M I S S I N G C O N T E N T
71. © Copyright 2024 • Directed Edges LLC Figma asset Specification ESDS Card Contained? Custom areas None Action(s)? Container Surface Light primary State Initial Image Aspect ratio 16:9 Text Size Medium Metadata? Description? Actions Variant Button Size Medium ESDS Card Anatomy ESDS Card 1 Width : 375 Border radius : 8 ESDS Image 2 Depends on : ESDS Image Aspect ratio : 16:9 ESDS Card text 3 Depends on : ESDS Card text Metadata? : true Description? : true S urf ace : Light S iz e : Medium ESDS Card actions 4 Depends on : ESDS Card actions V ariant : Button S iz e : Medium S urf ace : Light ESDS Card container 5 Depends on : ESDS Card container S urf ace : P rim ary l ight S tate : I nitial { M e t a d a t a } {T itl e} { Description} { Lab el} 1 2 3 4 5 L ayou t and spacing Content Direction : V ertical Al ignm ent : T op l ef t V ertical resiz ing : H ug H oriz ontal resiz ing : F ill I tem spacing: 16 P adding : 24 { M e t a d a t a } {T itl e} { Description} { Lab el} { M e t a d a t a } {T itl e} { Description} { Lab el} 16 24 24 24 24 F or and system designers system developers F or product designers { M e t a d a t a } {T itl e} { Description} { Lab el}
72. © Copyright 2024 • Directed Edges LLC Workflow / All the checklists, oh my! https://bit.ly/ds-tasks-and-subtasks
73. © Copyright 2024 • Directed Edges LLC Workflow / What does your team need, now? ⚠️ Let’s discuss ︎ We aren’t doing this (for now) We do this
74. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Releases ?
75. © Copyright 2024 • Directed Edges LLC Releases / Releases Release Publishing libraries of and to people to use them. design and/or code assets and/or docs communicating changes
76. © Copyright 2024 • Directed Edges LLC Releases / Release plan Plan Design Specification Code Code docs Figma asset Design docs Card Partial takeover 2024 08 2024 09 2024 10 2024 11 2024 12 Secondary accents New icons Error messaging Elevation tokens Bottom sheet FEATURE Filter menu Task Release
77. Features Tasks © Copyright 2024 • Directed Edges LLC Releases / Doneness matrix Used with permission, Target Corporation
78. © Copyright 2024 • Directed Edges LLC Releases / Releases board Release Release Release Doneness, by Task
79. © Copyright 2024 • Directed Edges LLC Releases / Communication cycle Week –2 Week –1 Release week Release day Copy Slack (Design) Slack (Dev) Email
80. © Copyright 2024 • Directed Edges LLC Releases / Communication cycle Week –2 Week –1 Release week Release day Copy Images final VQA Slack (Design) Slack (Dev) Email
81. © Copyright 2024 • Directed Edges LLC Releases / Communication cycle Week –2 Week –1 Release week Release day Scope Draft Copy final Images final VQA Slack (Design) Slack (Dev) Email Release announcement
82. © Copyright 2024 • Directed Edges LLC Releases / Orchestration Week –2 Week –1 Release week “Go live” Documentation site content Design assets Code packages Code tools (Storybook) Documentation site Design tools, plugins Figma library content Doc site version history Doc site blog Version history Sticker sheet Comp. descriptions Handoff sheet Slack (Design) Slack (Dev) Email Release announcement
83. © Copyright 2024 • Directed Edges LLC Releases / Orchestration Week –2 Week –1 Release week “Go live” Release announcement Documentation site content Design assets Code packages Code tools (Storybook) Documentation site Design tools, plugins Figma library content Slack (Design) Slack (Dev) Email Doc site version history Doc site blog Version history Sticker sheet Comp. descriptions Handoff sheet 54 Preassigned tasks , every release
84. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Initiatives ?
85. © Copyright 2024 • Directed Edges LLC Initiatives / Initiative Scope and it’s related tasks that drive towards specific outcomes and outputs to solve a problem, often within a period of time.
86. © Copyright 2024 • Directed Edges LLC Initiatives / Example INITIATIVE Modality # PROBLEM STATEMENT Teams are unable to consistently design and make common modal patterns in web & native experiences. # Outcomes Teams can.. x implement diverse modal behaviors within web and native experience} g quickly inform, gather data and make progress through workflows. OUTPUTS x Modal, takeover, and bottom sheet component} g Elevation visual language and layouž  Training, including playground} ‹ Integrations with 2-3 key adopters
87. © Copyright 2024 • Directed Edges LLC INITIATIVE Token taxonomy PROBLEM STATEMENT Tokens organization is poor. We can use Figma features, light and dark mode, or theming. Outcomes hp Refactor deeper token taxonom “p Align token names with commun ˆp Implement across all componen OUTPUTS hp Revised token taxonom” “p Figma theming approach and st ˆp Code integration across catalog INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes hp Identify components needed across ALL platform‰ “p Normalize names, anatomy, and props across platforms OUTPUTS hp Evolved component codeÐ “p Single Figma source-of-trutÊ ˆp Consolidated docs INITIATIVE Feature development # PROBLEM STATEMENT O ur feature catalog lacks and new and fixed features and must evolve to support the b usiness. # Outcomes M ore U I components and visual foundations features are availab le, expanding the catalog and maintaining trust in the program. OUTPUTS hp Component code package‰ “p Figma U I components and style‰ ˆp Documentation per features including guidelines, code AP I and example‰ Q p Communications per release INITIATIVE C ompos ability # PROBLEM STATEMENT P opular components req uire core team work to make isolated changes to support team-specific use cases. # Outcomes hp K ey components afford much more flexib le compositio} “p Teams deliver experiences with less reliance on system teaŠ ˆp System team support costs and irregular release demands go down OUTPUTS hp List / Row component upgrad¦ “p Card component upgrad¦ ˆp Training with playground file‰ Q p Evolved docs and usage demos Modality PROBLEM STATEMENT Teams are unab le to consistently design and make common modal patterns in web & native experienc Outcomes Teams can..p hp implement diverse modal b ehav within web and native experien “p q uickly inform, gather data and make progress through workflo OUTPUTS hp M odal, takeover, and b ottom sh component‰ “p Elevation visual language and la ˆp Training, including playground‰ Q p Integrations with 2-3 key adopt INITIATIVE Theming # PROBLEM STATEMENT # hp Data visualization palette as token‰ “p Figma components for 5+ chart‰ ˆp Build your own Figma charts guidance and reference demos INITIATIVE Des igner onboarding PROBLEM STATEMENT Designers lack resources to learn a INITIATIVE Des igner onboarding # PROBLEM STATEMENT Designers lack resources to learn and apply the design system in day to day work with confidence. # Outcomes hp Designer new hires can attend recurring live traininx “p Designers self-serve to learn the design system without live traininx ˆp Designers are b etter eq uipped to handoff work clearly to developers Initiatives / Attributes Initiatives are described via content including: Problem s tatement Outcomes Outputs Opportunities Ris ks Stakeholders Steps Delivery Plan
88. © Copyright 2024 • Directed Edges LLC Initiatives / Gather structured stakeholder input Summarize data to generalize preferences How many stakeholders? 10+? 25+?
89. © Copyright 2024 • Directed Edges LLC Initiatives / Reactions Wow, I had no idea the design systems team had so much to work on. The options all seem really important. – Senior leadership “
90. © Copyright 2024 • Directed Edges LLC Initiatives / Reactions I really wanted you to work on . Now that I see the possibilities, it feels like , and maybe are probably higher priority. X A B C – Senior leadership “
91. © Copyright 2024 • Directed Edges LLC Initiatives / More about roadmapping https://www.youtube.com/watch?v=4MpGxmlOf7w&t=768s
92. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Roadmap ?
93. INITIATIVE Feature development # PROBLEM STATEMENT Our feature catalog lacks and new and fixed features and must evolve to support the business. # Outcomes More UI components and visual foundations features are available, expanding the catalog and maintaining trust in the program. OUTPUTS u Component code packager l Figma UI components and styler h Documentation per features including guidelines, code API and exampler — Communications per release INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes u Identify components needed across ALL platformr l Normalize names, anatomy, and props across platforms OUTPUTS u Evolved component code½ l Single Figma source-of-trut· h Consolidated docs INITIATIVE Charts # PROBLEM STATEMENT The system lacks robust data visualization foundations and starting points to create charts easily. # Outcomes u Extend visual foundations to support data viz, especially coloÆ l Enable teams to easily add and customize chart components (like Bar) with reusable parts (like Axis) OUTPUTS u Data visualization palette as tokenr l Figma components for 5+ chartr h Build your own Figma charts guidance and reference demos INITIATIVE Composability # PROBLEM STATEMENT Popular components require core tea work to make isolated changes to support team-specific use cases. Outcomes u Key components afford much mo flexible compositio– l Teams deliver experiences with le reliance on system team h System team support costs and irregular release demands go dow OUTPUTS u List / Row component upgrad‰ l Card component upgrad‰ h Training with playground filer — Evolved docs and usage demos © Copyright 2024 • Directed Edges LLC Roadmap / The current work +
94. INITIATIVE Feature development # PROBLEM STATEMENT Our feature catalog lacks and new and fixed features and must evolve to support the business. # Outcomes More UI components and visual foundations features are available, expanding the catalog and maintaining trust in the program. OUTPUTS u Component code packager l Figma UI components and styler h Documentation per features including guidelines, code API and exampler — Communications per release INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes u Identify components needed across ALL platformr l Normalize names, anatomy, and props across platforms OUTPUTS u Evolved component code½ l Single Figma source-of-trut· h Consolidated docs INITIATIVE Charts # PROBLEM STATEMENT The system lacks robust data visualization foundations and starting points to create charts easily. # Outcomes u Extend visual foundations to support data viz, especially coloÆ l Enable teams to easily add and customize chart components (like Bar) with reusable parts (like Axis) OUTPUTS u Data visualization palette as tokenr l Figma components for 5+ chartr h Build your own Figma charts guidance and reference demos INITIATIVE Composability # PROBLEM STATEMENT Popular components require core tea work to make isolated changes to support team-specific use cases. Outcomes u Key components afford much mo flexible compositio– l Teams deliver experiences with le reliance on system team h System team support costs and irregular release demands go dow OUTPUTS u List / Row component upgrad‰ l Card component upgrad‰ h Training with playground filer — Evolved docs and usage demos © Copyright 2024 • Directed Edges LLC Roadmap / The accountable owner’s question What’s going on with our big bets?
95. © Copyright 2024 • Directed Edges LLC Roadmap / Board Impact Active initiatives Inactive initiatives Size (Discovery) Tasks Features give way to Initiative Initiative
96. Card Partial takeover Secondary accents New icons Error messaging Elevation tokens Bottom sheet Modal v2 F E AT U R E Filter menu Plan Design Specification Code Code docs Figma asset Design docs Ta s k 2024 08 2024 09 2024 10 2024 11 2024 12 R e l e a s e © Copyright 2024 • Directed Edges LLC Roadmap / Relating initiatives, releases and features Training Full takeover Feature development Web & native parity Token taxonomy Modality API alignment Accessibility upgrade 2 Charts Composability Theming Dev support upgrade Designer onboarding I N I T I AT I V E S
97. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Boards?
98. © Copyright 2024 • Directed Edges LLC Boards / Summary Dev React Dev iOS Design Releases Roadmap Backlog Tasks Tasks Tasks Features Initiatives Features, Initiatives includes includes How are (React) devs progressing right now? includes include includes includes How are (iOS) devs progressing right now? How are designers progressing right now? What will be delivered by when? What’s the status of our big bets? OBJECT What might we do, eventually? Board answers
99. Board Releases Release MM/DD Release MM/DD Release MM/DD Release MM/DD Release MM/DD Board Backlog Board Roadmap Board Dev React To be prioritized Plan Ready to start In progress In review Board Design To be prioritized Plan Ready to start In progress In review © Copyright 2024 • Directed Edges LLC Boards / Rituals anchored on boards Planning 1x / week or every other week Dev Standup 2x / week Design Standup 2x / week Attendees Dev manager (driver) All developers Product manager? Attendees Product manager (driver) Dev manager Dev lead(s) Design manager Design lead(s) Attendees Design manager (driver) All designers Product manager
100. © Copyright 2024 • Directed Edges LLC Boards / Bucketing "To be prioritized" Discuss in planning When something comes up (request, proposal, complaint, ...), where do we put it to make sure we talk about it? PROBLEM Discuss in design standup
101. © Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Board Dev Board Design To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name}
102. © Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Defect Defect
103. © Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Defect Defect Design-specific Dev-specific Trafficer Trafficer
104. © Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Defect Defect Design-specific Dev-specific Relevant to dev and design Trafficer Trafficer
105. © Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Assign Assign Slot & scope Defect Defect Design-specific Dev-specific Relevant to dev and design Trafficer Trafficer
106. © Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Board Backlog Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Assign Assign Respond and archive Slot & scope Refine and store Defect Defect Design-specific Dev-specific Relevant to dev and design Trafficer Trafficer
107. © Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered across and organized on a , all visible and tracked on Releases Workflow Plan Design Spec Code Figma asset Initiatives Roadmap Boards?
108. © Copyright 2024 • Directed Edges LLC Thanks! bit.ly/smashing-antwerp-managing-ds