How to handoff your designs to Engineering

[@jaygough3813]

When I say all of your content has given me better insight into ui/ux I truly mean it!!! Thank you for this!

[@emmanuelcadigwe]

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 KZbin channel. Please keep upload more contents like this. Thank you so much.

[@_RafaelKr]

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.

[@chutikarncholsaipant2421]

wow your figma is sooo organized, per usual. love how you remind us to show empty states + edge cases :)

[@CoreyStewart91]

"You're here because you care about your developers... I SWEAR YOU'RE ONE OF THE GOOD ONES" I needed to hear this today

[@brocker8617]

The most honest and straight to the point UX Design channel on youtube. :)

[@femkedesign]

So glad to hear that!

[@ahmedeldemerdash1556]

This is the most useful video on the handoff process on the whole internet for paid and unpaid courses. it's above great work!

[@fezplayground]

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!

[@femkedesign]

You are so welcome!

[@osherezra8460]

One of the most in depth tutorials and real life cases tips on KZbin thanks happy I'v found this channel keep it up @Fem

[@adebiyial]

Your engineers must be really really happy. I say this because I wish I was one of your engineers.

[@mewra9700]

This is really helpful for someone who is new to handing off designs to developers, like me!! Thank you for this video!

[@uncleope]

Femke makes me smile 🙈😭. You’ve just got to love her

[@khushipawar9109]

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!!!!

[@femkedesign]

Congrats on your internship!

[@jiamingfu9051]

The quality of the content in your channel just blown my mind! Really love it! Please share more with us!

[@femkedesign]

Thanks so much! I constantly have videos in the works so stay tuned.

[@funnzypink]

I am the only designer on my team and I really appreciate your video! thank you.

[@femkedesign]

You're very welcome!

[@leonsholo]

THIS IS ONE OF THE BEST VIDEOS EXPLAINING HANDING OFF PROJECTS!!!! WOW!!! JUST WOWWWWWW!!! this has really helped me a lot!!

[@femkedesign]

Thank you so much!!! I was worried it's getting a bit old but comments like this remind me it still helps people!

[@FatimaZahra-ee1fc]

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 !

[@femkedesign]

Aw thank you!

[@whelan0621]

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

[@femkedesign]

Glad it was helpful!

[@EuMoonBoy]

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?

[@mychannel-lp9iq]

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 🤗

[@luisbanegassaybe6685]

I’m a web engineer and I didn’t know about baseweb.design, that’s great that Uber publishes that

[@heymcgowan]

You laid out this video and explanation so nicely!

[@karenzurabyan4862]

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!!!

[@femkedesign]

You're welcome!!

[@cameroncampbell4702]

Don't know how I made it this far in my career without binging your channel, but better late than never 🙌

[@femkedesign]

Welcome!!

[@hyberson]

Congratulations on your product. It improves the quality of the software development process (and makes engineers' lives easier).

[@kwilderful]

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.

[@rajapurva2012]

Please keep on making such videos. This is highly helpful. You are like my unofficial mentor 🏆

[@naumankhokhar6471]

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.

[@founderkatelyn]

delightful, thank you for taking the time to share this

[@femkedesign]

Glad you enjoyed it!

[@wawrzyniecstefanski6734]

Super cool! I like monospace-like font for description - looks "cody". Thanks for that film.

[@AbhimanyuSirothia]

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! ✌️😊

[@juliesz78]

Wow, this video is really useful for me to understand how to manage figma files to handoff my engineering. Thanks a lot!

[@femkedesign]

You're welcome!

[@DupontMaxime]

Amazing! I will take every single tips for my projects 👍🏻

[@JessieJstudio]

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

[@JessieJstudio]

Femke Thankyou!☺️

[@LindaAhn]

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!

[@jaceguden2726]

You save my life daily no joke

[@aqua123670]

wow it's so neat ! i'm a frontend dev and i wish i worked with a designer like you.

[@femkedesign]

Wow, thank you!

[@ryansriffs9112]

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.

[@jasonwong7842]

All the videos I've seen from you have been so helpful/inspiring, but this one is definitely a favorite. Thank you!

[@neha1299]

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 😊🙏

[@rolajaber9276]

This is so detailed and so clear! a very efficient way to handout to the technical team.

[@Penkej]

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!

[@munaalsoffi7702]

You are an amazing scholar and designer. Thank you for all info you have provieded

[@femkedesign]

Thanks!

[@coiichen9894]

Well organized Figma file, and you have a powerful design sense!

[@GadgetsGearCoffee]

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

[@maciejbalasinski2419]

Really nice improvements!

[@guilhermeacardozo]

I loved to know your process. I will apply this in my next projects for sure!

[@femkedesign]

You got this!

[@RB-bq2rq]

Great work! Do you keep maintaining your "Latest Designs" page after you've transitioned to building the "Handoff page?"

[@aerozg]

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.

[@podunknik]

Appreciate the detailed explanations 👏

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...

[@femkedesign]

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.

[@kevinchow5604]

Where can i find the template please? Great video

[@saikatnextd]

@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 !!

[@thiagoalmmeida]

Excellent! Your process of work is very detailed and specific. Congratulations. I'm your new following. :)

[@femkedesign]

Thank you!

[@janbeee1]

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?

[@GadgetsGearCoffee]

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

[@ph4Life12]

this was so beyond helpful you're an amazing teacher!

[@femkedesign]

Thank you!

[@Kazane828]

And this is pretty handy, thanks Femke 👏🏻

[@tonys490]

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

[@ryanb2244]

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?

[@KohlHosein]

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!

[@femkedesign]

Thanks for the suggestion!

[@mann8939]

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

[@femkedesign]

Glad to hear it!!!

[@carolynec893]

This is awesome femke! I am curious how or if you include responsive information for your devs when scaling down to mobile ?

[@chaerulsutami3015]

Really really great content! Can you share about how you do versioning in your design (also relate to handoff). So many thanks!

[@femkedesign]

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 :)

[@greatpixels]

@@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.

[@b_dono]

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?

[@femkedesign]

I do! I host livestreams on Superpeer: www.superpeer.com/femke

[@CalatzOps]

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.

[@malemess]

@@femkedesign I would be so interested in this!

[@JR-gh8lp]

You are seriously amazing!! Thank you so much for sharing. Very helpful

[@noahstack375]

Whoa I love that template and the handoff specs! Who created/designed it??

[@raulgaming1000]

tq sis ! i learn alot how to handsoff design from you

[@femkedesign]

Great to hear!

[@berdilaovidiu]

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.

[@femkedesign]

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.

[@paweenaha4120]

Very useful content, thank you so much to make an effort doing this video, really appreciated Femke!

[@alfredyeap8890]

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?

[@femkedesign]

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!

[@manuel_lebreault]

Love the content, this shows me that I have a lot of work to do 😭😭

[@femkedesign]

One step at a time :)

[@kuanyangchen3033]

Super clear! Really thank you for sharing this. Have one question tho, wondering how you handoff responsive layout spec?

[@kuanyangchen3033]

I see! Thank you so much 🥰

[@urifried37]

I noticed that the specs that you share are super clear. How did you create those pink margin and padding lines?

[@lavendela9403]

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

[@jacopocontin]

I'm gonna steal your template 😊. Nicely done 👏👏👏

[@femkedesign]

Hope it helps!

[@elingebring43]

Thank you so much for sharing! Super interesting to see.

[@DarshanGajara]

Great video, Femke. How much time do you usually spend while spec-ing the design for handoff?

[@michellezhu1559]

Hi Femke, thanks so much for sharing the handoff with us using real examples! It is so valuable to peak into how big company does things! May I ask one question about the "core" or "spec" section? Do you also have a separate design system file in Figma that is regularly maintained and do you also add in there the newly custom made components you put in the "Core/spec"? Thank you!!!

[@femkedesign]

Hey! Yeah I would maintain this as a source of truth I guess for that part of the product in which I own, so would update it if need be :)

[@199rajesh]

Thanks alot Femke for this video, Can you make more videos about your process in figma

[@amberschen1124]

Great content! thank you for sharing this! Also, did you use any plug-in to connect the screen for the flow? thx : )

[@cric46999]

Nice informative video.....which plugin you use to annotate 6:30 ?

[@femkedesign]

No plugin - this was done manually!

[@AhmetEfeoglu]

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?

[@femkedesign]

I did! But I do highly recommend using Zeplin these days (this video is a little old) :)

[@NyteMyre]

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.

[@femkedesign]

definitely! This video needs an update haha

[@florianbress5059]

What font are you using for those banners? Core User FLow etc? looks amazing!

[@shriyashekhar4454]

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?

[@TristanBailey]

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.

[@mosopeadebowale]

Hi Femke, thank you for creating this video and this shows your deep empathy for the developers. If you do not mind I would like to ask how this handoff process would apply in situations where you have tight deadlines. I can see this took a lot of effort and time to create. How would you speed up this workflow in that situation?

[@mosopeadebowale]

@@femkedesign thank you very much for the reply

[@madebyape]

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.

[@femkedesign]

Making them components sounds like the way to go!

[@MateusPienta]

Hello Femke, First, thank you so much for the content. It's very much appreciated. Thank you so much, love your work. I read through the comment sbut couldn't find this exact question so I tough I'd ask you and here it is: We've been working on making presentations and trainings with devs and other teams so they can use figma in more effective ways. But the same problem is seen throughout our designers as well, making it hard to establish company-wide handoff or file construction patterns (most files and flows actually have their specific needs al well). Talking stricly about this handover process you showcased, is this a company-wide pattern that works for you guys? How is that consistency handled?

[@DieterPrivate]

Consider doing Lean UX, as then you don't need to rely on handoffs.

[@vgcanada]

Awesome and well explained !

[@heathflohre5285]

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?

[@sebastianvisual33]

Why you dont use zeplin for specs? Great video, thanks!

[@aleksandrajasinska9177]

Amazing content! I was looking for some info about documentation and you did the best job so far in my opinion. One question thou; could you please explain what Sandbox file is?

[@femkedesign]

It's just your private workspace to explore :)

[@Qbabxtra]

This is so good that even I, as a _developer_ is watching it. El-o-el

[@CanOkyay]

Thanks! Helped a lot.

[@carolyn1437]

Great info! So my team has been using Zeplin for dev handoff, which everyone seems to really love. Have you ever used Zeplin and would you do all of this in addition to using it?

[@femkedesign]

Yes! I have a whole video on Zeplin here, and no I probably wouldn't go to this level of detail if I were using Zeplin day to day: kzbin.info/www/bejne/rn3Xo3p_lNF0npo

[@dsep12345]

Are the arrows you use for the flow custom? Or can I find them somewhere on the web?

[@xxheyymallyy]

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!

[@femkedesign]

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 :)

[@xxheyymallyy]

@@femkedesign thanks thats super helpful!

[@johnbandadesigns4605]

I like how you don't leave anything to chance in the explanation of things. I noticed that you had a separate section where you breakdown the spacing of components, though in Adobe XD (I use Figma as well) when you share your prototype/work for developers, they get spacing measurements all highlighted in detail. So was wondering if that would save you on time since you won't have to always do individual breakdowns of spacing?