Dude, where's my icon?

Iconography is a powerful way to create consistency and maintain visual identity across apps and platforms. Yelp's design team recently revamped our entire collection of icons, taking it from a chaotic mix of sizes, colors, and styles to one unified set. Designers and engineers worked together closely on a tool for maintaining the icons and making it easy for developers on any platform to use the icons in their apps. Hear about our iterative approach to rolling out the "Yelpicon" system and how we're looking beyond icons to continue to tighten the gap between design and production code.

Lightning talk for Clarity Conf 2016 (http://clarityconf.com/)

Transcript

1. Dude, where’s my icon? Molly Finkle mollyf@yelp.com / @mfnkl
2. Yelp’s Mission Connecting people with great local businesses.
3. Yelpicons a cross platform visual icon system
4. Yelpicons in the build
5. Way back when
12. Square (18x18dp) Portrait (14x20dp) Landscape (20x14dp) Circle (20dp)
15. Export PNGs 1x 1.5x 2x 3x
16. 1x 1.5x 2x 3x email dropbox JIRA
17. More cross-platform engineering teams
18. More cross-platform engineering teams
19. Hackathon
21. | | | )_) )_) )_) )___))___))___)\ )____)____)_____)\\ _____|____|____|____\\\__ ---------\ /--------- ^^^^^ ^^^^^^^^^^^^^^^^^^^^^ ^^^^ ^^^^ ^^^ ^^ ^^^^ ^^^ shipit!
22. | | | )_) )_) )_) )___))___))___)\ )____)____)_____)\\ _____|____|____|____\\\__ ---------\ /--------- ^^^^^ ^^^^^^^^^^^^^^^^^^^^^ ^^^^ ^^^^ ^^^ ^^ ^^^^ ^^^ shipit! wait!
23. Minimal command line version svg_icons App Local
24. Remaining painpoint Manual updates… svg_icons App Local x
25. Forget the UI… Let’s automate! svg_icons validate build web build iOS build android package iOS package android
26. Web @import 'svg_icons/icon'; $svg_icons.template.js_load_svg_spritesheet() $icon('24x24_order') $icon('24x24_order', color='active')
27. iOS pod ‘YLIcons’ import YLIcons let img = Icon.OrderSize24.image() let img = Icon.OrderSize24.image(tint: .Active)
28. Single source of truth yelp.com/styleguide/icons
30. Challenges Naming is hard. Cross platform naming is harder.
31. What’s next? colors.json
32. engineeringblog.yelp.com @YelpEngineering dribbble.com/yelp yelp.com/styleguide