Handing off designs to software engineers (using flows and annotations)
HTML-код
- Опубликовано: 5 июн 2024
- 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 (designlab.pxf.io/c/1370620/18...)
✌︎ Connect with me
Instagram: / chunbuns
TikTok: / chunbuns
✌︎ Design Bootcamps I recommend
➭ DesignLab $100 discount link: designlab.pxf.io/c/1370620/18...
➭ Springboard: www.springboard.com/ Get $1000 off your UX Design course with code CHUNBUNSSB1000
➭ UXcel (great free visual design course): uxcel.com/?ref=christinechun
✌︎ What I’m wearing
➭ Everlane half-zip sweater (size XS): www.pntra.com/t/TEFNS0VFQUVLS...
✌︎ Camera + Editing
➭ SONY VZ-1 camera: amzn.to/2Ifweal
➭ Joby on-camera microphone: amzn.to/3BEv2Ee
✌︎ Music
➭ Epidemic sound’s free trial: www.epidemicsound.com/referra...
✌︎ 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
![Oscar Maydon x Junior H - Volver Al Futuro [Official Video]](http://i.ytimg.com/vi/sa52xabMSB8/mqdefault.jpg)
I'll be hosting monthly livestreams where you can learn more about my design process. Spots are selling fast, so sign up here to snag your spot! superpeer.com/chunbuns
I have had used zeplin it's great! but the new connecter lines in figma are a game changer. My life has become so much easier after I discovered the connecter lines. You just copy a connect line from a FigJam document and paste it into your Figma document. Then you can simply copy and paste that line and connect the frames. It's dynamic as well and makes your life much easier.
Great tips, thanks!
This is one thing I really wish my bootcamp talked about more. I'm so worried about having little to no knowledge about handing off final designs to software engineers, but this video definitely helped ease my fears. Thanks a bunch for making your videos!
my bootcamp didn't teach me this either 💀
@@chunbuns forget Bootcamp my college didn't teach me this lmao I had to find out about Zeplin during an internship
Which boot camp did you take?
@@jfkf939 I’m still not sure what makes me happy I’m too young lol but we’ll see
@@user-rv7ge1tc4l hey please I need help where’d you find an internship ?? and how much did they pay you
The amount of value you have in your videos is crazy. I landed in a senior ui ux position as my first job and it was crazy! You help a lot
This will come in so handy once I’m done with bootcamp and working in the field. I might even use it for a hackathon I’m participating in. Thank you for always sharing such great tips!
You are an absolute gem 💎! Thank you for showing more real world scenarios and their processes. This is gold !
With how important this topic is, there really aren't many videos about it. Great work.
No kidding! Everytime I see one of your videos you hit the nail in something I'm looking for or something that I didn't know how to look for... It's amazing
For arrows, you can use FigJam arrows. Just copy/paste them. They could be connected to frame, layer, whatever, and be able to change their form and direction relative to the object they are connected to.
Life saver! I didn't know this for months
This is EXACTLY what I’ve been looking for!!! Thank you so much Christine this is incredibly so helpful ❤️
I'm so glad!! seriously makes my day when you find my content helpful 😊
Amazing video, really helpful! Working on my first hand off to engineering and it really helped me understand how to properly do it!
Thank you for sharing this! Really love this type of videos and I hope you do more of them.
Thank you for making all the videos. much appreciate your work and knowledge this helps me get to know a lot more about about this job
Aw, this is helpful thankyou chunbuns love the way to share it's on point!
Thanks for sharing! I really like the grouping functionality idea, will try that out in my work. Thanks!
Super helpful! I worked in one company and jumped to freelancing right after but UX design has evolved so much since. I always go through imposter syndrome when I work with a new dev team... I feel like my own system is not "professional enough" and might be hindering me to land better clients. I need to watch more of other designers' methods
I don't know if you understand what a godsend this is. So informative and helpful
Wow that works awesome, especially for mobile screens! I have trouble with desktop flows for data-heavy enterprise apps because there's more going on and the screens are larger., but wouldn't hurt to try this.
Wow !!! this is really great video!!! thank you for this !
This video is super helpful! Thank you for sharing 🙌
watch your videos during my lunch at work! Keep up the great work!
Amazing amazing exactly what I need. Thanks for sharing!
Thank you!! This is so gold!!
This was so helpful! Thanks for sharing!
Wish I had found your channel earlier. Thank you so much for taking time to create content!
Great tips for creating user flows. Thank you Christine for always bringing such good videos. Any examples or tools for creating user journey for the next video? Looking forward to it.
I’ve been looking for an informative video on this topic. Thank you!
yay! thanks for watching :)
Thank you so much for your video, I'm learning so much from you, and you are inspiring me more to be better in my job thanks
This is sooo helpful thank you so much!!
a little hack, you can copy an arrow from Figjam and paste it into your design file. so you can connect your screen with that arrow without the need to customize it
You don't need zeplin in Figma. There is a simple to use plugin called Autoflow that allows you to easily connect not just frames but individual components.
yes but the arrows dont move with the screens if you move them
agreed
Can't the prototype menu be used instead, why or why not?
This was so great! Didn't realize Zeplin has become so advanced now!!
That's so useful, thank you for share a good thing
作为一个中国人，竟然能够完全听懂你说的英文，真的是得赞一下自己，哈哈！果断关注！
Very helpful! Thank you so much!
wow, that Zeplin is quite a powerful tool. thx for the tutorial
Great tutorial. Thank you. ❤
Thank you for your video. It's help me to understand how to work a lot.
So useful. Thank you for your sharing
This is very helpful!
I haven't seen a lot of videos on this topic, so this is super helpful - thank you!
yay! I'm glad to be of help :D
Oh genial gracias por compartir, es un contenido que estaba buscando hace un tiempo
I loved you video! just one question, Where do you use the product finished and how do you approve the design?
This is awesome! Thanks for sharing.
This is totally different but what do you use to record your screen and edit such as zooming in and out? I’d like to record my design process and I’m looking for suggestions.
Thanks so much.
This is a great tutorial on how to use zeplin but it would've been nice to see information on this topic outside of a sponsored product, I think the bits of wisdom at the end were most helpful and it would've been great to have more general advice like that. I think the title of the video is a bit misleading but I also understand I have little right to complain since this is free content anyways. Thanks for sharing this tool regardless ^u^
If the design of Figma frames are based on a style guide and a component library, the style guide and component library will be exported to Zeplin when the Figma frames are exported to Zeplin. It will be appreciated if you can demonstrate how a style guide and a component library can be exported and shown in Zeplin along with Figma frames!
This is great insight! What do you do if frontend makes a change down the road or there are iterations that are not presented in the original handoff/design, how do you document the updates or iterations from the original?
Awesome video 😃
You just got a new subscriber 😎👍
Zeplin is really amazing based on your review. Thank you for this video! May I ask you: Do you use it instead of text specification or as an addition?
Really wonderful
I love your top where is it from? Great video as always ❤️
Awesome video! Question, why won't you use the arrow/connection feature on Prototype mode?
Thanks for this video.
Thanks for sharing. I do have 2 questions: 1 what is the different from Figma inspect mode and Zeplin plugin? 2. Since our company have to approved to use plugin, what would be the the high light we could bring up to the bigger group to become let this plugin become available?
hey Christine, can you make a video on grids and gridding and their importance?
Zeplin is truly a life-saver :)
Thanks for this video. I'm moving over from Adobe XD to Figma.
amazing video ... do you make the designs responsive on figma before to export to devs or do they do it when they code ? constraints /responsiveness in figma is painful to work with.. thanks
thank you so much.
I missed your videos :)
Please make a video on explaining full process from wireframing to testing, so that will very helpful for the people like me,
Thank you for the video. How do you show success & error screens?
The arrows on your figma file were not done manually but with the autoflow plugin. This is just an ad.
Even with the autoflow plugin, you still have to customize the arrows for certain instances. ultimately the tool you use isn't as important as the flows themselves. Zeplin is just one tool you can use out of many.
great video!
thank u!
nice time on all the screens
Thanks for making such good vedios for us .Please tell Does ux designer get transfer to other countries
Zeplin is truly a life-saver
Good presentation
I think conduit Product Design has changed a bit tbh. I have an annotate area in Figma with links to Stackblitz/API's etc, to substantiate and help negate mistakes from the Engineers having any guesswork. Also too many Product Designers hand off, sort of wash their hands and it just isn't the best in class anymore. I haven't used Zeplin since 2019.
How do you do the usability testing or prototyping testing before the development in the software if you are working offshore?
Should I add task flows, User flows, Architectural information, and empathy maps in my first-ever self-made UX case study? Different UX designers are giving different opinions and tips on these. I'm confused. Please help me
Hi! I've a question.. How do you export screens that interacts with a pop up? Do you export it with the pop up already inside the frame? Because it seems very difficult to comprehend the canvas in figma with arrows getting out of the frames and looking for another one across the canvas that opens as an overlay.
Would you recommend Figma and Zeplin over just using Adobe XD? They have a prototyping and developer export process.
youre such a fucking boss with those designs.
At 6:20, the annotation is not auto-numbered. I need the numbering because I often reference other annotations. Do you know any annotation tool that support auto-numbering? Thanks!
Hi, do you make 5 or more artborad for one screen if you like prototype that is full animated or how do you handelt flowcharts diagramm?
my idee is that i Have one rectangle for an artboard in flowcharts diagramm equal to a screen so than i have an Map (Like rout map) an i know how many view/Secreen i have to design but in praxis i need more artboard for animation and detail.
Have you tried ProtoPie?? Seems like so much time would be saved if you used imported your Figma project there.
How I wish we had UX designers in our team xD
Hey! Chunbuns can you share a roadmap for how to be self taught ui ux Designer?
this is going to have to be an entire course 😅 I'm working on it!
I wonder if other companies are shifting away from Zeplin? just curious is there are any other alternatives. I love zeplin still :)
Thank you for this video, is it possible to export zeplin board as document like pdf?
Yes, you can from the web app!
Pls make a discord server for ui ux
Love ur content 💙💙💙
What about prototyping instead of using the arrows to show the flow?
This is my thought too. I’m curious as all my projects have documentation that points out logic and in addition, the prototypes are interactive and grouped based on modules so it’s unclear why I would have to do this too
thank you..
Why not use prototyping instead of adding the arrows? Makes things much easier. I use figjam to create user flows and wire frames where team collab with annotation and diagram is easier
Figjam is another approach! I personally haven't tried it but can see how it can work. Engineers often want to see all the screens in one view and a prototype doesn't serve that need because you can only see one screen at a time. Most of the times, I show both a prototype (to illustrate animation and interaction details) and user journey (to show all the possible paths and edge cases).
because Zeplin sponsored this video :)
I would like see your page organization in Figma
I have to difficult wireframes, screens and flows T.T
The arrow mess is one reason why I didn't want to hop onto the Figma wagon. It's so painful not to have the fundamental basics of IX Design. The arrow plugins are also a mess and don't udpate. I wish they'd just add this feature already. :(
They're slowly upgrading it! I'm still a Figma fan 😅
They added this in Figjam last year.
The feature exists, you just have to copy an arrow from any FigJam file into your normal Figma. It snaps to frames and moves with them, and you can add text by double clicking. Then you can duplicate it as much as you want. Workaround until they add it to normal Figma tools, at least it's native, no plugins needed now :)
Ive been thinking about a education like you. My worries are that Im a truly introvert, shy, dont want to be in the center of attention and talk infront groups :/ is it much of that? Thank you!
Is maths used a lot for graphic design???? Please respond I really need to know and if yes what kind of maths
copy and page the Figma jam arrow into your Figma file. This dose the same thing
You should rename this video to (Zeplin app overview) that’s disappointing - with all respect ✊ 🙌
Likeeee... you get!
What's board function in flows?
Rename the video to: HOW TO USER ZEPLIN. Dont make clickbaits. , i really respect you plz dont make fool of us.
Which macbook is that?
wow. Zeplin changed a lot.
I used Figma FigJam for this. It's easier.
If you're working in Figma, why not just prototype?
I think figjam works the same.
ok but zeplin is not free 🥵
yes please i fking hate when they hand me down large projects in figma, a fking in the pain in the ass heavy af program, also if you use figma , DO NOT FOR GOD SAKE PUT ALL THE TABLES IN 1 "PAGE" we do not have massive screen generally but multiple ones so is a pain in the ass to go trough all of them in detail. Figma maybe be great for design but it's pain and time wasted for engineers