This talk was given by Grace Kwan at Women Who Code CONNECT 2019 in San Francisco, CA.

1. Bringing a Design Language to Life
Grace Kwan, Senior UX Engineer @ Button

2. • Senior UX Engineer at Button, a mobile commerce startup in NYC
• I design & develop for the web, with a focus on design systems
• @gckwan on Medium / grace@usebutton.com
About Me

3. What is a Design Language?
• A system that emphasizes the meaning of design elements
• Core styles
• UI components
• Patterns
• Analogy: Words, phrases, grammar

4. Core Styles: Colors

5. UI Components

6. Why Invest in a Design Language?
• Design & build UI faster
• Communicate consistently, regardless of the designer/developer
• Set the foundation for future evolutions

7. For web development:For design: For communication:
React UI LibrarySketch UI Library A style guide
How might we make a design language easy to speak?

8. For web development:For design: For communication:
React UI LibrarySketch UI Library A style guide
How might we make a design language easy to speak?

9. Sketch Symbols
• An easy way to reuse elements across Sketch files
• Master is stored in the document’s Symbols Page
• Each use of the symbol is an instance
• Instances can have overrides, such as text

11. Designing Scalable Symbols
• Naming: [Element] / [Variant]
• Resizing: Pin to edge, Fix Width, Fix Height
• Color Masks: Create symbols with a number of color options
• Symbol Organizer: Neatly organize your symbols page by name

12. Naming:
[element] / [variant]

14. Resizing

15. Resizing

16. Color Masks

18. Symbol Organizer

20. Sketch Libraries
• Symbols page shared across multiple Sketch documents
• Each document can individually subscribe to updates
• Any Sketch document can be a library

22. Structuring Your Libraries
• One Sketch Library for Core Styles, one for UI Components
• Separate libraries for any company-specific assets
• Abstract for version control

23. For web development:For design: For communication:
React UI LibrarySketch UI Library A style guide
How might we make a design language easy to speak?

24. Core Styles in CSS
• One variable for each CSS rule
• One class for each “exported” core style
• Ensure styles are scoped appropriately (can use CSS Modules)

26. Building React UI Components
• Strictly presentational components
• Use props to represent all possible variants
• Avoid overriding individual instances in CSS
• Enums/utils for shared logic across components

28. Structuring a UI Library in code
• Standalone GitHub repository
• Export core styles, UI components
• Avoid unnecessary dependencies
• Semantic versioning (major, minor, & patch versions)

29. For web development:For design: For communication:
React UI LibrarySketch UI Library A style guide
How might we make a design language easy to speak?

30. What is a Style Guide?
• The what, how, and why of your design language
• Use cases for each core style & component
• A single source of truth across teams

31. React Storybook
• Generate an interactive style guide using simple “story” syntax
• Component playgrounds
• Handy plugins

33. How Do I Get Started?
• Review your existing UIs + select the elements to keep
• Document use cases and patterns as you go
• React-sketchapp: Render React & Sketch components from React Native code

34. Want to work on problems like these?
Button is hiring!
Shoot me a line at grace@usebutton.com.