VA (near Washington, DC) Worked on ~85 design systems since 2006 Blog at medium.com/@nathan curtis a Socialize on linkedin.com, twitter.com @nathan curtis a Hi, I’m Nathan
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?
– and – for? Is our team doing ? Do my matter? Am I at the right time(s)? Is my teammate’s work ? Can we better design and engineering? Can we work ? ... ? Do I know the we are going? responsible NOT responsible enough ideas included visible align faster smarter direction
that design systems produce Workflow process Training curriculum Strategy and plans Analytics reports Design tokens UI components UX patterns Content guidance
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
and as a system asset. made documented released attributes Published in 1+ Useful to and/or and/or Implicitly or explicitly librarie designers developers other versioned
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
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”
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”
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”
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”
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
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
Yes, let’s go...! -> Communicate to stakeholders -> Confirm the scope -> Assign remaining tasks -> Assign to release -> Initiate next task No, will not support -> Communicate to stakeholders -> Close task
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
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
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
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
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
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
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
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?
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
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 F igm a Props panel c om ponents API explorations Al tern ativ e 1 Al tern ativ e 2 Al tern ativ e 3 Are actions req uired, and is that exposed at the top level? Nathan Curtis
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?
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
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}
INITIATIVE Modality # PROBLEM STATEMENT Teams are unable to consistently design and make common modal patterns in web & native experiences. # Outcomes Teams can..q wq implement diverse modal behaviors within web and native experience| q quickly inform, gather data and make progress through workflows. OUTPUTS wq Modal, takeover, and bottom sheet component| q Elevation visual language and layou¥ q Training, including playground| q Integrations with 2-3 key adopters
PROBLEM STATEMENT Tokens organization is poor. We can use Figma features, light and dark mode, or theming. Outcomes se Refactor deeper token taxonom ne Align token names with commun e Implement across all componen OUTPUTS se Revised token taxonom ne Figma theming approach and st e Code integration across catalog INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes se Identify components needed across ALL platform ne Normalize names, anatomy, and props across platforms OUTPUTS se Evolved component codeÇ ne Single Figma source-of-trutÑ e Consolidated docs 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 se Component code package ne Figma UI components and style e Documentation per features including guidelines, code API and example Qe Communications per release INITIATIVE Composability # PROBLEM STATEMENT Popular components require core team work to make isolated changes to support team-specific use cases. # Outcomes se Key components afford much more flexible compositio ne Teams deliver experiences with less reliance on system tea e System team support costs and irregular release demands go down OUTPUTS se List / Row component upgrad§ ne Card component upgrad§ e Training with playground file Qe Evolved docs and usage demos Modality PROBLEM STATEMENT Teams are unable to consistently design and make common modal patterns in web & native experienc Outcomes Teams can..e se implement diverse modal behav within web and native experien ne quickly inform, gather data and make progress through workflo OUTPUTS se Modal, takeover, and bottom sh component ne Elevation visual language and la e Training, including playground Qe Integrations with 2-3 key adopt INITIATIVE Theming # PROBLEM STATEMENT # se Data visualization palette as token ne Figma components for 5+ chart e Build your own Figma charts guidance and reference demos INITIATIVE Designer onboarding PROBLEM STATEMENT Designers lack resources to learn a INITIATIVE Designer onboarding # PROBLEM STATEMENT Designers lack resources to learn and apply the design system in day to day work with confidence. # Outcomes se Designer new hires can attend recurring live traininm ne Designers self-serve to learn the design system without live traininm e Designers are better equipped to handoff work clearly to developers Initiatives / Attributes Initiatives are described via content including: Problem statement Outcomes Outputs Opportunities Risks Stakeholders Steps Delivery Plan
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? How are big bets progressing? OBJECT What might we do, eventually? Board answers
"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
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}
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 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
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
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
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
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?
nathanacurtis
ryu1013
hicard
kenichiota0711
tararira
ashapiro
kitanosirokuma
0b1tk
videlvequio
lynteo
bebe
mhand01
keroyama
philnash
tessaabrams
jct
ammeep
samtorres
kimpetersen
moore
soudai
aarron
michaelherold
techseoconnect
palkan
