This is an archived version of the 2017 edition of UXLx. The current event website is at

Jina Anne

  • Jina Anne created her first style guide in 2004. She has been a designer, developer, writer, and speaker on design systems ever since. At Salesforce, she is lead designer on the Lightning Design System. She also created the Design Systems Slack, which led her to start the San Francisco Design Systems Coalition. She organizes Clarity, the first ever design systems conference.

    Jina is also active in the Sass community. She leads the Sass brand and website. She was a tech editor for Dan Cederholm’s Sass for Web Designers. She organizes The Mixin, a front end meet up which has hosted talks by some of the most prominent members of the CSS/Sass community, and recently took ownership of Sass News.

    Previously, Jina has worked at companies including Apple, GitHub, Engine Yard, and Crush + Lovely. She coauthored two books, Fancy Form Design and The Art & Science of CSS.

    Her side project, Art in My Coffee, is a curated collection of coffee art.

  • Author of:
    Fancy Form Design:
    Create Sensational Web Forms That Sparkle
    with Tim Connell and Derek Featherstone Sitepoint


09:00 - 17:30


Design Systems

Design systems bring together style guides, patterns, UI libraries, CSS frameworks, and brand to help design teams build clear, efficient, consistent, and beautiful products. But, where does a design team or a solo designer begin?
Jina, a designer who has helped build design systems for smaller design agencies and large-scale enterprise ecosystems alike, shares her process and experience so you can begin a design system of your own, and have the structure and insight needed for ongoing success.

In this workshop, you’ll explore key steps in the process:

  • Starting with research: talking to who's involved, to better understand why we're doing this.
  • Conducting a UI inventory: find the user interface elements, and group them by common patterns.
  • Documenting the concerns: open questions and action items.
  • Defining the vision: decide on the design principles, create the user stories and roadmap, and determine the metrics.
  • Creating a style guide: why they should be living documents, abstracting with design tokens.
  • Creating a UI kit/UI library: whether in Sketch/Photoshop or in HTML, follow best practices.
  • Refactoring & realigning UI: moving legacy UI over.
  • Where to from here: intro to automation and testing, and how to survive over time.



16:50 - 17:25

Auditorium I

Because McLuhan

“What if McLuhan is right? Suppose he is what he sounds like – the most important thinker since Newton, Darwin, Freud, Einstein and Pavlov?” – Tom Wolfe (1969)

Folks from within the community of UX practice have been calling for the death of the wireframe since the early ‘oughts. And now with the rise of Agile, the death-knell is ringing from without. Just so you know: they are coming for the rest of our deliverables.

How in today’s Lean world do we situate the role of depiction and documentation in our process? If in the past we were doing it wrong, how do we go forward doing it right?

This presentation introduces Marshall McLuhan’s four laws of media, as applied to UX design and software development. Attendees will learn how to analyze the media we use to depict, deliver and approve our ideas while avoiding subtle and pernicious traps that lurk in the interplay between medium and message.