How to handoff your designs to Engineering
ฝัง
- เผยแพร่เมื่อ 13 มิ.ย. 2024
- ✨ Join the waitlist for my course on Product Strategy for Designers - cohorts run multiple times a year and space is limited maven.com/femke/product-strat...
By popular request, a look into my handoff process to Engineering! You'll see some of my recent work in this video, and I'll show you how I handed off static screens and surfaces vs. full on user flows.
Looking for 1:1 mentorship or feedback on your portfolio? Book a session with me on Superpeer: superpeer.com/femke
----------------------------------------------
//LINKS
Base Web: baseweb.design/
//TIMESTAMPS
0:00 - Intro
0:25 - What is a design handoff?
1:27 - Handing off static screens
6:30 - Handing off user flows
10:18 - Defining specs & states
13:15 - Outro
//GET STARTED IN UX
UX Design Validation course: uxforfreelancers.thinkific.co...
UX Research and Strategy course: uxforfreelancers.thinkific.co...
// MORE
Portfolio: www.femke.co.nz/
Blog: www.femke.co.nz/articles
Podcast: www.designlife.fm/
// SOCIAL
Twitter: / femkesvs
Instagram: / femkesvs
//TOOLS (referral links)
Music: www.epidemicsound.com/referra...
Webflow: webflow.com/?rfsn=1125819.b1c...
MailerLite: www.mailerlite.com/a/ktugp8ucmm
![Yoshi Rinrada - 'มาทำไม' [Official MV]](http://i.ytimg.com/vi/r41xbfRLkLs/mqdefault.jpg)
![[Full] อังคารคลุมโปง Close Up EP.49 | คนใกล้ผีคนที่ 49 : หมอฉุกเฉิน “หมอบอส” (Thai Sub)](http://i.ytimg.com/vi/dKPUaX7UxMQ/mqdefault.jpg)
When I say all of your content has given me better insight into ui/ux I truly mean it!!! Thank you for this!
This is the first video I've watched on your channel and I am blown away. I can't even believe that I just stumbled on your TH-cam channel. Please keep upload more contents like this. Thank you so much.
As a developer who has built a lot of frontend designs I can say this is what every frontend engineer dreams of! Just awesome how well structured and detailed this is and how most (all?) edge cases are already defined beforehand. Usually when getting a design I have to spend hours of thinking on how the user flow should be and how everything fits together. Sometimes it even has to be reworked later as it's not working as expected. The least amount of time is the actual implementation of such a layout.
wow your figma is sooo organized, per usual. love how you remind us to show empty states + edge cases :)
"You're here because you care about your developers... I SWEAR YOU'RE ONE OF THE GOOD ONES" I needed to hear this today
All the videos I've seen from you have been so helpful/inspiring, but this one is definitely a favorite. Thank you!
This is so detailed and so clear! a very efficient way to handout to the technical team.
One of the most in depth tutorials and real life cases tips on TH-cam thanks happy I'v found this channel keep it up @Fem
Such an informative video. I'm always trying to find ways to make my design handoff not only easier for the devs but for myself as well. Super organized and so helpful. Thanks Femke!
You inspired me to finally find what I really want to di with my life.. thank you so much I love you and and please keep it up 🤗
This is the most useful video on the handoff process on the whole internet for paid and unpaid courses. it's above great work!
Please keep on making such videos. This is highly helpful. You are like my unofficial mentor 🏆
You laid out this video and explanation so nicely!
This is really helpful for someone who is new to handing off designs to developers, like me!! Thank you for this video!
Your engineers must be really really happy. I say this because I wish I was one of your engineers.
Congratulations on your product. It improves the quality of the software development process (and makes engineers' lives easier).
The most honest and straight to the point UX Design channel on youtube. :)
So glad to hear that!
The quality of the content in your channel just blown my mind! Really love it! Please share more with us!
Thanks so much! I constantly have videos in the works so stay tuned.
Amazing! I will take every single tips for my projects 👍🏻
delightful, thank you for taking the time to share this
Glad you enjoyed it!
Very useful content, thank you so much to make an effort doing this video, really appreciated Femke!
THANK YOU!!! this is my first intership and my first time working with the developers , this video is giving me soo much info i didnt knew i needed!!!!
Congrats on your internship!
Appreciate the detailed explanations 👏
Outstanding! Simply outstanding. It's one thing to want to be this detailed, but it's another to execute it so perfectly. But kudos to me, I was able to create a box in a frame.
Thank you so much! This is superb!
Have been having so many issues with engineers lately. This is going to be super helpful.
Have already shared the video with my team, will have them start implementing a few of these things right away.
I’m pretty sure sure I’m going to do that SuperPeer thing at some point. Sounds awesome!
Keep making great vids! ✌️😊
I need to pause in the middle of the video because I'm blown away with the way you manage your Figma file.
OMG, thanks for sharing this! I learned so much from you!
You are so welcome!
This is helpful ..really shows how detailed your hand offs are. Thank you for sharing. I am a designer with few years of experience in graphic and retail designing. I took break from work and now I am looking to work im UX \ UI field.
Your videos help me understand this field better. 🌸subscribed 😊🙏
another great Video Femke..love to see your live design process of an app! so we can all follow along and learn form you.. cheers
I loved to know your process. I will apply this in my next projects for sure!
You got this!
Femke makes me smile 🙈😭. You’ve just got to love her
I recently need to do a handoff to programmer and I find your tutorial very helpful in giving me a big picture of what to handoff & also the detailed how-to.
I also appreciate the part you explain your "thinking" behind those elements, that make me understand why you do what you do, which is important to me.
I have learned a lot from your video. Thanks a lot for your time & effort :D
Glad it was helpful!
You are seriously amazing!! Thank you so much for sharing. Very helpful
Super cool! I like monospace-like font for description - looks "cody". Thanks for that film.
Wow, this video is really useful for me to understand how to manage figma files to handoff my engineering. Thanks a lot!
You're welcome!
Really nice improvements!
this was so beyond helpful you're an amazing teacher!
Thank you!
Guuurl, engineers must be collectively in love with you for such detailed documentation ! haha what a huge work you do to facilitate communication, I respect that a lot ! I'm a Product designer who is an ex-Engineer and both profiles in me are astonished haha keep it up and thanks a lot !
Aw thank you!
Thank you so much for sharing! Super interesting to see.
And this is pretty handy, thanks Femke 👏🏻
Thanks a lot, this was really insightful and inspiring!
Super helpful ! I'm a UX UI designer who just graduated and this video really gave me alot insights on how i should be organizing my designs for engineers, though I did it in my own different way but i'll DEFINITELY start using your method! Thanks!! xoxo
Femke Thankyou!☺️
Excellent! Your process of work is very detailed and specific. Congratulations. I'm your new following. :)
Thank you!
Very Informative. Loved it!
Thank you Femke. Very insightful.
Questions:
1. how do you handle responsive designs HandOff?
2. how does you design system library looks and what is the process you guys work with it? how do you submit a new component to the system?
3. How does your Design QA looks like?
This is extremely useful. Thank you
Well organized Figma file, and you have a powerful design sense!
You are an amazing scholar and designer. Thank you for all info you have provieded
Thanks!
Thanks! Helped a lot.
@femke this is wonderful. It would be great if you can explain the full design process you went through on this project, research, ideation, critique, user stories and various journeys and you already have the handoff..... I think that would set a wonderful example of how it should be done adding to already awes9me videos you post out there...... thanks for the hard work !!
You save my life daily no joke
Superb🙌👍 Thanks a lot for making this Video🙏
Awesome and well explained !
I’m a web engineer and I didn’t know about baseweb.design, that’s great that Uber publishes that
Hey! Thank you for this amazing video!!! I was struggling two or three days to understand how to organize handoff. Non of my friends, who actually work already as designer, couldn't clue me in hahah )
So thank you very much!!!
You're welcome!!
Fantastic stuff. Thank you.
This is so helpful!! Thank you so much :)
Omg femke, it's like hand-off is an entire different game just like devops.
Amazing.
Please make a video on how to work collaboratively on one design. what's your process.. Godspeed.
tq sis ! i learn alot how to handsoff design from you
Great to hear!
I am the only designer on my team and I really appreciate your video! thank you.
You're very welcome!
Quality content! Thank you
Don't know how I made it this far in my career without binging your channel, but better late than never 🙌
Welcome!!
Love the content, this shows me that I have a lot of work to do 😭😭
One step at a time :)
This was really helpful, thanks
Glad to hear it!
This is so good that even I, as a _developer_ is watching it. El-o-el
great videos! taught me so much :3
Yay! Thank you!
This is great thank you! :)
wow it's so neat ! i'm a frontend dev and i wish i worked with a designer like you.
Wow, thank you!
I loved much to see it. Thanksssssssss!
Glad you enjoyed it!
Wow something very useful. I was looking for a way to improve my work with dev team and I might apply some ideas from your video . Thanks
Glad to hear it!!!
I'm gonna steal your template 😊. Nicely done 👏👏👏
Hope it helps!
Thanks for sharing!
You're welcome Randy!
hi Femke, this is super useful! I just moved to Figma from Sketch + Invision and the handoff experience is quite different. Just out of curiosity, why did you lay out all the specs in the file even though engineers can check specs using the editor? thanks!
Great video!
Cheers!
Great stuff! Thanks for sharing! Question: Do you have to go through accessibility review for new elements prior to handoff?
Thank you for the video.
You're welcome
OMG Thank you so much for this. Im on a huge project right now and having total anxiety on it. Your layout here really sets a huge standard very nice!. Do you do any live streams or is there a way you interact with people if we have questions?
I do! I host livestreams on Superpeer: www.superpeer.com/femke
This is awesome femke! I am curious how or if you include responsive information for your devs when scaling down to mobile ?
Thanks, femke!
You're welcome!
Great video, thank you for the insight! Would love to hear you thoughts on building design systems using the Atom framework and the tools needed to allow collaboration across team members, for example Abstract if we’re using Sketch or just sticking to Figma.
@@femkedesign I would be so interested in this!
Hi Femke, amazing video as always. Thanks a lot! I know so many people move to Figma but would you consider making a video for sketch/zeplin users?
this is awesome
This was very insightful, thank you! I do have one question; I noticed you don't have any designs for tablet and mobile. Do you not hand those off as well?
gah you're amazing! this is so so helpful
Glad it was helpful!
Thank you
Authentic content
Thanks!
This is so helpful! When you lay out your screen flows, are you using a copy of the actual design frames or a screenshot/image export of them? And are they at 100% size or reduced to fit the presentation?
Great content! thank you for sharing this! Also, did you use any plug-in to connect the screen for the flow? thx : )
Great video, Femke. How much time do you usually spend while spec-ing the design for handoff?
Why has no one made a detailed handoff video like this? I just got my first UX job in design systems and documentation and this is really helping. Do you have any resources for learning more of this in depth? Subscribed.
Thanks alot Femke for this video, Can you make more videos about your process in figma
Whoa I love that template and the handoff specs! Who created/designed it??
Hi Femka, thanks for sharing your valuable insights again as usual! Just wondering if the specs portion is really necessary as Figma already have the guideline provided for devs. When it comes to a more complex user flow with animation that could not convey via the static screens, do you mind give further insights into how's your approach in doing that, please?
If you have engineers that know how to use Figma, then no the red lining is not necessary :)
For those kinds of flows I'd include a prototype!
thank you thank you thank you!
Great work! Do you keep maintaining your "Latest Designs" page after you've transitioned to building the "Handoff page?"
Hi Femke! Thanks for your helpful videos and spreading the knowledge! Q- on your screen sizes- assuming all your desktop screens in your user flows are 1280px, does that mean your overall artboard size for a section is large enough to hold all the full size 1280px screens (meaning it's a huge artboard)? (sorry if obvious question??)
Super clear! Really thank you for sharing this. Have one question tho, wondering how you handoff responsive layout spec?
I see! Thank you so much 🥰
wow, your content is top notch, if I could do 5% of what you do and organize the way you do I'd be good! Where is that template you mention on Figma? I don't see a link in the description, thanks in advance
I would love to see a tutorial or course of this design hand off. I'm super new to ux ui design and I had no idea this is how you document things. I would love to learn more on this or get resources where I can read more on this.
Excellent video!
Thanks for the suggestion!
Great video! Did you create your own user flow arrows/lines/circles or is this a Figma plug-in? Thank you
What font are you using for those banners? Core User FLow etc? looks amazing!