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 RUclips 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.
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!
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!!! 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!!!!
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?
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 !
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!!!
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
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.
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!
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 😊🙏
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
its very deep detail, here i think i trained the devs to use figma too maybe i am doing wrong i dont know but here they use the file too and read the classes and know to inspect files...
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! ✌️😊
Maybe a noob question, but at 10:44, why do you define the spacing between elements explicitly? - Can it not be done only through Figma from the inspect or code tab?
@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 !!
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
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.
Hey! These days I usually have a new page in my Figma for each week, so that old versions and explorations are preserved and folks can easily go back and see the history :)
@@femkedesign Thank you very much for your sharing. When your component library is updated, how can you handle the pages you have created in this way? Also, you use the same screen frames in more than one place. Are you creating components from screen frames for this? Thanks.
Thanks for sharing your process. That helps me a lot. Now that you are done with this project: Do you update your master figma files with the latest designs from this particular project? (in this example the "campain Banner" or "how to pause an existing campaign" . I assume that you are having multiple figma master files with the overall "campaign manager" flows and files. (everything else the users are able to do that). I guess after each project you update your masterfiles, or how do you handle that?
ya I'm wondering how to keep the whole thing tidy and up to date when there are the master files somewhere and then all these additional screenshots or copies (of various iterations) I feel things can get lost
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!
hi, i have a questions, why you prototype all this to develpper with presentation , and in the adobe xd or figma have prototype animation, you have only record a video of your website with prototype ?
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!
Could I ask why you did red lines and showed such detailed specs when the figma file does that already? Wasn't sure if that's easier for dev or if there was another reasoning behind it, curious to learn!
Hi Femke, Would you please make a video about how is product designer different from industrial designer & how to differentiate between all those design related educations. Wouldn’t a design engineer be able to get do the design as you do? Best regards Aria
I feel that a lot of in the Specs section can be done by engineers themselves using the Figma Inspect option, and spelling it out like that seems like a lot of unnecessary work. Likewise with the states of the dropdown. Also with your "Status Indicator" example. Why exactly spell out the color or class when.. if you have a style defined in your library, the engineer can see it exactly in the Inspect window. I do like the organized workstreams and user flows though.
Those UI screens look very neat and orderly. How do you construct your UI and layouts? I would love to learn about your process. My web application layouts always end up looking very simplistic and underwhelming, just a step above wireframes or semi hi-fi mockups, and then there is no more time and off they go into production, because i am so slow :( Most companies have an existing design system in place, but lets say you don't use an existing design system but have to do something from scratch, what's the first thing you do? How do you start thinking about the problem you need to solve? Do you for example use a typography grid (8pt) to set the horizontal visual rhythm? What about the vertical grid/columns (12 or 16 columns etc...)? How do you decide which one to use and why? Do you first address the information hierarchy and decide what emphasis to put on which element of the UI? How do you prioritize? How do you iterate? I have so many questions. I have been doing design for a long time but i am still not happy with my output, and i know i can do better. Cheers! Subscribed & following.
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.
Thanks, very useful. One thing, so you have the same screen used multiple times throughout the different flows, what if you have to update one of those screens, would you need to update all of the other instances of that screen manually? I was thinking recently of turning screens into components so I can reuse a screen throughout a flow.
Thanks for sharing. Your annotations would be a great help as a developer. How much more work is it, as I don’t know figma or time saved with template and repeat use of this layout 3 panels each project? Also had a project I did Frontend only on, and noticed the hand off being an issue html -> code. Seems without figma it would be much harder as we just had tickets plus flat html hand off. So just show options on the page but couldn’t do comments well which your system allows. Good to show PM/team to change to.
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?
Wow I really appreciate the deep dive. I never thought of making it flow by flow before. I wonder if you have any plugin recommendations like Zeplin that might help automate these things? Did yu design all the flow arrows yourself?
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?
Hi, thanks for sharing. What preset screen size do you use in your spec? I always run out of places when it comes to a lot of flows and screens. Thanks!
@@femkedesign So what do you do to make sure it looks good on smaller (or wider) screen sizes? Can you also make a video on how you make sure your design is responsive and how you consider diffrent screen sizes while designing. I love the clarity with which you make your videos and its helpful for a fairly new designer like myself.
Hi Femke, how long do you have to prepare that kind of handoff typically? is it officially recogniszed as a design activity? I struggle in my company to make it a mandatory step handle by designers and not product managers during grooming sessions. it hands up in avoidable longer QA sessions when i litteral cc guidestyles and screenshots of figma inspect column.
I love your content, it is great seeing someone else's process and draw inspiration. I have some questions though. Being so much lazier, I try to get away with the bare minimum. Figma gives developers (viewers) some good ways of inspecting distances, colors, styles and even component names and variants. Do you still find it helpful to lay all that out in plain sight? And secondly, how do you deal with that amount of screen duplication when an inevitable change is needed? Thanks and looking forward to watching more of your content.
Great points! This video is getting a little old now, though still very popular haha. I don't spell everything out in so much detail anymore. Instead I try to train my engineers on how to use Figma so they can get a lot of the info themselves.
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 RUclips 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 :)
This is the most useful video on the handoff process on the whole internet for paid and unpaid courses. it's above great work!
This is really helpful for someone who is new to handing off designs to developers, like me!! Thank you for this video!
"You're here because you care about your developers... I SWEAR YOU'RE ONE OF THE GOOD ONES" I needed to hear this today
The most honest and straight to the point UX Design channel on youtube. :)
So glad to hear that!
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!
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!!! 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!
THIS IS ONE OF THE BEST VIDEOS EXPLAINING HANDING OFF PROJECTS!!!! WOW!!! JUST WOWWWWWW!!! this has really helped me a lot!!
Thank you so much!!! I was worried it's getting a bit old but comments like this remind me it still helps people!
I am the only designer on my team and I really appreciate your video! thank you.
You're very welcome!
One of the most in depth tutorials and real life cases tips on RUclips thanks happy I'v found this channel keep it up @Fem
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?
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!
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 🤗
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!
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.
Super cool! I like monospace-like font for description - looks "cody". Thanks for that film.
You laid out this video and explanation so nicely!
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!!
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!
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.
Femke makes me smile 🙈😭. You’ve just got to love her
Please keep on making such videos. This is highly helpful. You are like my unofficial mentor 🏆
Don't know how I made it this far in my career without binging your channel, but better late than never 🙌
Welcome!!
Congratulations on your product. It improves the quality of the software development process (and makes engineers' lives easier).
wow it's so neat ! i'm a frontend dev and i wish i worked with a designer like you.
Wow, thank you!
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!
Your engineers must be really really happy. I say this because I wish I was one of your engineers.
Nice informative video.....which plugin you use to annotate 6:30 ?
No plugin - this was done manually!
All the videos I've seen from you have been so helpful/inspiring, but this one is definitely a favorite. Thank you!
I'm gonna steal your template 😊. Nicely done 👏👏👏
Hope it helps!
This is so detailed and so clear! a very efficient way to handout to the technical team.
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 😊🙏
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!☺️
its very deep detail, here i think i trained the devs to use figma too maybe i am doing wrong i dont know but here they use the file too and read the classes and know to inspect files...
Makes sense! By process has changed a lot since this video and I also have been teaching devs how to use Figma to save this overhead.
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! ✌️😊
Amazing! I will take every single tips for my projects 👍🏻
You are an amazing scholar and designer. Thank you for all info you have provieded
Thanks!
delightful, thank you for taking the time to share this
Glad you enjoyed it!
Well organized Figma file, and you have a powerful design sense!
I loved to know your process. I will apply this in my next projects for sure!
You got this!
Maybe a noob question, but at 10:44, why do you define the spacing between elements explicitly? - Can it not be done only through Figma from the inspect or code tab?
@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 !!
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
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!!!
Excellent! Your process of work is very detailed and specific. Congratulations. I'm your new following. :)
Thank you!
Where can i find the template please? Great video
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
You save my life daily no joke
Very useful content, thank you so much to make an effort doing this video, really appreciated Femke!
Love the content, this shows me that I have a lot of work to do 😭😭
One step at a time :)
this was so beyond helpful you're an amazing teacher!
Thank you!
Really nice improvements!
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.
Really really great content! Can you share about how you do versioning in your design (also relate to handoff). So many thanks!
Hey! These days I usually have a new page in my Figma for each week, so that old versions and explorations are preserved and folks can easily go back and see the history :)
@@femkedesign Thank you very much for your sharing.
When your component library is updated, how can you handle the pages you have created in this way? Also, you use the same screen frames in more than one place. Are you creating components from screen frames for this? Thanks.
Thanks for sharing your process. That helps me a lot. Now that you are done with this project: Do you update your master figma files with the latest designs from this particular project? (in this example the "campain Banner" or "how to pause an existing campaign" . I assume that you are having multiple figma master files with the overall "campaign manager" flows and files. (everything else the users are able to do that). I guess after each project you update your masterfiles, or how do you handle that?
ya I'm wondering how to keep the whole thing tidy and up to date when there are the master files somewhere and then all these additional screenshots or copies (of various iterations) I feel things can get lost
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!
You are seriously amazing!! Thank you so much for sharing. Very helpful
Appreciate the detailed explanations 👏
hi, i have a questions, why you prototype all this to develpper with presentation , and in the adobe xd or figma have prototype animation, you have only record a video of your website with prototype ?
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!
And this is pretty handy, thanks Femke 👏🏻
Could I ask why you did red lines and showed such detailed specs when the figma file does that already? Wasn't sure if that's easier for dev or if there was another reasoning behind it, curious to learn!
Hey! Our eng weren't familiar with how to use Figma. Since this video we've taught them how to so I don't red line as much :)
@@femkedesign thanks thats super helpful!
Hi Femke,
Would you please make a video about how is product designer different from industrial designer & how to differentiate between all those design related educations.
Wouldn’t a design engineer be able to get do the design as you do?
Best regards
Aria
Great work! Do you keep maintaining your "Latest Designs" page after you've transitioned to building the "Handoff page?"
I feel that a lot of in the Specs section can be done by engineers themselves using the Figma Inspect option, and spelling it out like that seems like a lot of unnecessary work. Likewise with the states of the dropdown. Also with your "Status Indicator" example. Why exactly spell out the color or class when.. if you have a style defined in your library, the engineer can see it exactly in the Inspect window.
I do like the organized workstreams and user flows though.
definitely! This video needs an update haha
Thanks alot Femke for this video, Can you make more videos about your process in figma
Those UI screens look very neat and orderly. How do you construct your UI and layouts? I would love to learn about your process. My web application layouts always end up looking very simplistic and underwhelming, just a step above wireframes or semi hi-fi mockups, and then there is no more time and off they go into production, because i am so slow :(
Most companies have an existing design system in place, but lets say you don't use an existing design system but have to do something from scratch, what's the first thing you do? How do you start thinking about the problem you need to solve? Do you for example use a typography grid (8pt) to set the horizontal visual rhythm? What about the vertical grid/columns (12 or 16 columns etc...)? How do you decide which one to use and why? Do you first address the information hierarchy and decide what emphasis to put on which element of the UI? How do you prioritize? How do you iterate? I have so many questions. I have been doing design for a long time but i am still not happy with my output, and i know i can do better. Cheers! Subscribed & following.
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!
Are the arrows you use for the flow custom? Or can I find them somewhere on the web?
tq sis ! i learn alot how to handsoff design from you
Great to hear!
Thanks, very useful. One thing, so you have the same screen used multiple times throughout the different flows, what if you have to update one of those screens, would you need to update all of the other instances of that screen manually? I was thinking recently of turning screens into components so I can reuse a screen throughout a flow.
Making them components sounds like the way to go!
Thanks for sharing. Your annotations would be a great help as a developer. How much more work is it, as I don’t know figma or time saved with template and repeat use of this layout 3 panels each project?
Also had a project I did Frontend only on, and noticed the hand off being an issue html -> code. Seems without figma it would be much harder as we just had tickets plus flat html hand off. So just show options on the page but couldn’t do comments well which your system allows. Good to show PM/team to change to.
I noticed that the specs that you share are super clear. How did you create those pink margin and padding lines?
What font are you using for those banners? Core User FLow etc? looks amazing!
Thank you so much for sharing! Super interesting to see.
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
Could you share the file example?
Do you not use the redlining functionality of Figma ?
This is so good that even I, as a _developer_ is watching it. El-o-el
Whoa I love that template and the handoff specs! Who created/designed it??
Wow. That was amazing. You worked on uber eats. That was pretty successful in India.
Amazingly explained. More of these please..
Thank you! Will do!
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 🥰
This is awesome femke! I am curious how or if you include responsive information for your devs when scaling down to mobile ?
Why the mentoring section not accessible on your website. Is it kind, of course, you are offering?
Wow I really appreciate the deep dive. I never thought of making it flow by flow before. I wonder if you have any plugin recommendations like Zeplin that might help automate these things? Did yu design all the flow arrows yourself?
I did! But I do highly recommend using Zeplin these days (this video is a little old) :)
Curious on why this style of presenting specs versus something like Zeplin or Invision inspector?
Question: Where did you get the arrow?
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?
I wonder if this can be done in Sketch?
Hi, thanks for sharing.
What preset screen size do you use in your spec?
I always run out of places when it comes to a lot of flows and screens.
Thanks!
@@femkedesign So what do you do to make sure it looks good on smaller (or wider) screen sizes? Can you also make a video on how you make sure your design is responsive and how you consider diffrent screen sizes while designing. I love the clarity with which you make your videos and its helpful for a fairly new designer like myself.
Hi Femke, how long do you have to prepare that kind of handoff typically? is it officially recogniszed as a design activity? I struggle in my company to make it a mandatory step handle by designers and not product managers during grooming sessions. it hands up in avoidable longer QA sessions when i litteral cc guidestyles and screenshots of figma inspect column.
I love your content, it is great seeing someone else's process and draw inspiration. I have some questions though. Being so much lazier, I try to get away with the bare minimum. Figma gives developers (viewers) some good ways of inspecting distances, colors, styles and even component names and variants. Do you still find it helpful to lay all that out in plain sight? And secondly, how do you deal with that amount of screen duplication when an inevitable change is needed? Thanks and looking forward to watching more of your content.
Great points! This video is getting a little old now, though still very popular haha. I don't spell everything out in so much detail anymore. Instead I try to train my engineers on how to use Figma so they can get a lot of the info themselves.
Superb🙌👍 Thanks a lot for making this Video🙏
Awesome and well explained !
where did you get the blue arrows in the user flow? they look amazing.