August 23, 2018 @ Studio Science
Speaker and Panel Recap
Designers and developers/engineers are different! We all feel the struggle, but we can start bridging the gap by empathizing with one another.
Try a new approach to bridge the gap:
- Be easy to work with
- Our work is different, but we’re still people. Empathize with one another!
- Communicate throughout your process and make them a part of it. Most of all, keep everyone informed.
- Adapt! Meet your counterparts in the middle. Learn something new if you’re excited about how it can help the handoff between design and development.
Design systems are a good starting point to help the designer/engineer relationship. Mitigate design debt. Leverage work that others have done before you, but don’t forget to innovate where necessary.
Designers, feeling stuck on how to relate to devs?
- Develop enough technical knowledge to understand what level of effort your design is asking for.
- Go out of your way to learn technical constraints.
- Help developers empathize with the users.
Engineers, don’t know how to relate to designers?
- Be willing and able to contribute to high-level conversations about the direction of the project.
- Don’t slap designers on the wrist. Soften your response to their designs.
- Keep an attention to detail.
- Talk to each of the engineers you work with before presenting a big change.
- Build empathy but stand your ground.
- The idea that you’re one or the other and that one is magic and the other is utilitarian is not true.
- Work together, discuss solutions, and learn how you can best present each other solutions – Developers prove your arguments, let’s test the idea!
- Demystify your work, open your process, and communicate when things go wrong.
Design + Development – B-sides!
Big thanks to Mark Williams for providing this week’s B-sides based on his talk and demo.
- Framer X
- Storybook.js – Custom react component library/playground (Examples)
- Abstract – Version control for Sketch files
- Zeplin – Annotate/Spc designs before handing off to a developer
- React SketchApp from Airbnb – Render React components in a Sketch file
- HTML SketchApp – Render system agnostic code components in a Sketch file (Github Repo)
- Sketch to React Components – create React components from objects in Sketch
- Airbnb – The Way We Build
- Design Systems Handbook
- Sketch’s Open File Format
- Sketching a Design System with React-SketchApp
- Automatically Generate Code from Wireframes at Airbnb
- Creating a Product Design System in Sketch
- Salesforce Living Design System
A Big Thanks to Nadia Zunarelli for putting this recap together and Mark Williams for creating the resource list!