Handing off designs to software engineers (using flows and annotations)
Once my designs are finalized, this is how I prep my design file to handoff to my engineers. Individual screens don’t capture user journeys so it’s important to use flows and annotations to map and document all possible paths and behaviors.
👀 Looking for a UX design bootcamp or course? Get $100 discount on DesignLab's UX Academy (https://designlab.pxf.io/c/1370620/1815038/20334)
✌︎ Connect with me
Instagram: https://instagram.com/chunbuns
TikTok: https://www.tiktok.com/@chunbuns
✌︎ Design Bootcamps I recommend
➭ DesignLab $100 discount link: https://designlab.pxf.io/c/1370620/1815038/20334
➭ Springboard: https://www.springboard.com/ Get $1000 off your UX Design course with code CHUNBUNSSB1000
➭ UXcel (great free visual design course): https://uxcel.com/?ref=christinechun
✌︎ What I’m wearing
➭ Everlane half-zip sweater (size XS): https://www.pntra.com/t/TEFNS0VFQUVLSUdKTEFFREhLRE0?url=https%3A%2F%2Fwww.everlane.com%2Fproducts%2Fwomens-felted-merino-halfzip-sweater-deep-camel%3Fcollection%3Dwomens-sweaters
✌︎ Camera + Editing
➭ SONY VZ-1 camera: https://amzn.to/2Ifweal
➭ Joby on-camera microphone: https://amzn.to/3BEv2Ee
✌︎ Music
➭ Epidemic sound’s free trial: https://www.epidemicsound.com/referral/efd264
✌︎ Timestamps
0:00 Intro
0:15 Final designs on Figma
1:48 Tool to make handoff easier
2:21 How to use Zeplin
2:58 Creating user flows
3:22 Arrow creation
4:28 Adding labels to flows
4:48 Creating subflows
5:54 Adding annotations to screens
7:03 What detail do I include?
7:25 Join my livestreams
✌︎ Business Inquiries
➭ hello@chunbuns.com
#designhandoff #uxdesign #uxdesigntutorial
👀 Looking for a UX design bootcamp or course? Get $100 discount on DesignLab's UX Academy (https://designlab.pxf.io/c/1370620/1815038/20334)
✌︎ Connect with me
Instagram: https://instagram.com/chunbuns
TikTok: https://www.tiktok.com/@chunbuns
✌︎ Design Bootcamps I recommend
➭ DesignLab $100 discount link: https://designlab.pxf.io/c/1370620/1815038/20334
➭ Springboard: https://www.springboard.com/ Get $1000 off your UX Design course with code CHUNBUNSSB1000
➭ UXcel (great free visual design course): https://uxcel.com/?ref=christinechun
✌︎ What I’m wearing
➭ Everlane half-zip sweater (size XS): https://www.pntra.com/t/TEFNS0VFQUVLSUdKTEFFREhLRE0?url=https%3A%2F%2Fwww.everlane.com%2Fproducts%2Fwomens-felted-merino-halfzip-sweater-deep-camel%3Fcollection%3Dwomens-sweaters
✌︎ Camera + Editing
➭ SONY VZ-1 camera: https://amzn.to/2Ifweal
➭ Joby on-camera microphone: https://amzn.to/3BEv2Ee
✌︎ Music
➭ Epidemic sound’s free trial: https://www.epidemicsound.com/referral/efd264
✌︎ Timestamps
0:00 Intro
0:15 Final designs on Figma
1:48 Tool to make handoff easier
2:21 How to use Zeplin
2:58 Creating user flows
3:22 Arrow creation
4:28 Adding labels to flows
4:48 Creating subflows
5:54 Adding annotations to screens
7:03 What detail do I include?
7:25 Join my livestreams
✌︎ Business Inquiries
➭ hello@chunbuns.com
#designhandoff #uxdesign #uxdesigntutorial