This talk was given by Grace Kwan at Women Who Code CONNECT 2018 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
Like any other language – a way of communicating in according to clear, consistent, meaningful rules.
- Core styles – some call them “design elements.” These are like words, in that each individual element has meaning. (colors, typography, spacing)
- UI components, such as inputs, buttons, and containers built on top of those core styles. These are like phrases.
- Patterns define the correct usage of UI components. They’re like grammar, in that unless phrases are strung together in the correct order, they’ll sound odd.

4. Core Styles: Colors

5. UI Components
UI Components
Combine core styles to communicate with the user. For example, you can see how the colors and text combine in the case of the FeatureAlert to indicate whether the
message is purely informational or indicates a good/bad thing.
This also crosses over into patterns. An established pattern is that if you see a question mark icon, you can hover over it to view a tooltip. This is the “grammar” of our
design language, and if it doesn’t work, we’re violating it – and we’re failing to communicate with the user.

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

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?
First, we’ll discuss the Sketch UI Lib.

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
There are a few things you’ll want to keep in mind when turning your UI comps into Sketch. In particular, here are a few tips and tricks.

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
Symbols are definitely handy, but until now, they’ve been limited only to single Sketch documents. As of Sketch 47, Sketch now officially supports libraries, which makes
it much easier to maintain consistent styles across documents.

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
1. This allows the UI components library to build on top of and use the core styles
2. Dropbox for automatic backup and syncing across people; Abstract does the same but builds in version management.

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)
First, I’ll talk about our core styles and how we represent them in our library in CSS.
Here at Button, we use SCSS and CSS Modules to make styling easier. SCSS gives us variables, mixins, and other handy language extensions, whereas CSS Modules
solves CSS’s classic global scoping problem, so we can ensure that our UI library styles never bleed into or override the application’s local styles.
However, what we discuss here should be applicable even if you don’t use this exact setup.

25. Variables on the left
Helper classes (Denoted by underscore)
External-facing classes, for direct use in JSX

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
How to write a React component is out of scope, but this is a good starting point
“Keep it open-sourceable”

27. className is generally only used for spacing
Note the status enum and helpers (getAlertIconType and getAlertColor, which simply return a string for the icon type name and the icon color to pass to the Icon
component)

28. Structuring a UI Library in code
• Standalone GitHub repository
• Export core styles, UI components
• Avoid unnecessary dependencies
• Semantic versioning (major, minor, & patch versions)
Semver: Each repo can subscribe to updates on its own, much like Sketch libraries

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

32. Still a work in progress
Filling out overviews

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
So far we’ve focused our efforts on web, because we’re still a tiny company

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