Keeping a design system in sync and up-to-date can be a huge time investment. By using real production assets, designers and developers can work together by using the same resources. In this talk, Kelly will demonstrate how she uses code to maintain a single source of truth within Sketch.

1. Engineering Authenticity
Crafting Design Systems with Code
Kelly Harrop
@kellycodeschaos #bigd18

2. Any plugins, tools or methods mentioned in this
presentation are based on my own personal preference
and do not reflect those of my employer.

3. Beautiful designs are worthless

4. Beautiful designs are worthless
when they aren’t experienced.

5. What gets designed What gets experienced
Good intent does not guarantee good products.

6. More time is spent presenting to stakeholders than
focusing on the actual experience.

7. We celebrate too early.

8. Acknowledge more. Celebrate less.

9. Standard Design Systems
• Can be out of sync with coded components
• May not be able to see all possible variants
(disabled state, size options, etc) or scenarios of a
complex component (truncation, wrapping, etc)
• Developers may not be able to implement the
“final” design based on how the coded
component is configured

10. react-sketchapp

11. react-sketchapp
• Use React Native elements to render Sketch
components
• Use the same mental model in Sketch that
the experience will be coded in
• Sketch automatically updates when code is
saved
https://github.com/airbnb/react-sketchapp

13. html-sketchapp

14. html-sketchapp
• For when you’re not working in a React Native
project
• Doesn’t rely on React
• You can create Sketch components based off of
websites
• But… it doesn’t support some features (yet)
https://github.com/brainly/html-sketchapp

16. Storybook

17. Storybook
• A way for designers, developers, and product to
reference the same components
• You can include rationale, code snippets, and
even change prop values on the fly
• Example: https://bit.ly/2vBn4vL

18. Bad merge conflicts
Lack of visibility/access
The wrong things are being QA’d
Unintentional experiences can also be a result of…

19. Closing Thoughts
• A polished user experience is more important
than pixel-perfect comps
• Spend more time building and perfecting
• Experiment and fail
• Close enough is not good
enough

20. Be ruthless in your pursuit of perfection.

21. kellyharrop.com
@kellycodeschaos
Questions?