How to handoff your designs to Engineering

Подписаться 83 тыс.

Просмотров 150 тыс.

50% 1

✨ 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

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 292

@jaygough3813 3 года назад

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

@emmanueladigwe6901 3 года назад

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

@jasonwong7842 3 года назад

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

@osherezra8460 3 года назад

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

@rolajaber9276 3 года назад

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

@chutikarncholsaipant2421 3 года назад

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

@heymcgowan 3 года назад

You laid out this video and explanation so nicely!

@LindaAhn 3 года назад

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!

@mychannel-lp9iq 3 года назад

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 🤗

@_RafaelKr 3 года назад

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.

@hyberson 3 года назад

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

@AbhimanyuSirothia 3 года назад

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

@NickLeake 3 года назад

Appreciate the detailed explanations 👏

@adebiyial 3 года назад

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

@rajapurva2012 3 года назад

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

@paweenaha4120 3 года назад

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

@jiamingfu9051 2 года назад

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

@femkedesign 2 года назад

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

@mewra9700 5 месяцев назад

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

@founderkatelyn 2 года назад

delightful, thank you for taking the time to share this

@femkedesign 2 года назад

Glad you enjoyed it!

@elingebring43 3 года назад

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

@JR-gh8lp 2 года назад

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

@DupontMaxime Год назад

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

@ahmedeldemerdash1556 11 месяцев назад

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

@tonys490 3 года назад

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

@kwilderful 8 месяцев назад

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.

@maciejbalasinski2419 3 года назад

Really nice improvements!

@guilhermeacardozo 3 года назад

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

@femkedesign 3 года назад

You got this!

@neha1299 3 года назад

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

@rahullokhande5759 3 года назад

Very Informative. Loved it!

@Penkej 3 года назад

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!

@xavhan 3 года назад

Thanks a lot, this was really insightful and inspiring!

@khushipawar9109 2 года назад

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 2 года назад

Congrats on your internship!

@CoreyStewart91 3 года назад

"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 2 года назад

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

@femkedesign 2 года назад

So glad to hear that!

@CanOkyay 2 года назад

Thanks! Helped a lot.

@vgcanada 2 года назад

Awesome and well explained !

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

@akinboopeyemi6197 3 года назад

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

@Kazane828 3 года назад

And this is pretty handy, thanks Femke 👏🏻

@munaalsoffi7702 2 года назад

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

@femkedesign 2 года назад

Thanks!

@stickyamor 3 года назад

This is extremely useful. Thank you

@wawrzyniecstefanski6734 Год назад

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

@ph4Life12 3 года назад

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

@femkedesign 3 года назад

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!

@thiagoalmmeida 3 года назад

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

@femkedesign 3 года назад

Thank you!

@JessieJstudio 3 года назад

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 3 года назад

Femke Thankyou!☺️

@coiichen9894 3 года назад

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

@kartikdhaduk4024 3 года назад

Superb🙌👍 Thanks a lot for making this Video🙏

@FatimaZahra-ee1fc 2 года назад

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 2 года назад

Aw thank you!

@saikatnextd 3 года назад

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

@wetiot 3 года назад

Fantastic stuff. Thank you.

@azenza7366 3 года назад

This is so helpful!! Thank you so much :)

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

@morethanpixls 3 года назад

Great stuff! Thanks for sharing! Question: Do you have to go through accessibility review for new elements prior to handoff?

@EuMoonBoy 3 года назад

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?

@ozenuaoluwatobi Год назад

This was really helpful, thanks

@femkedesign Год назад

Glad to hear it!

@ryanb2244 3 года назад

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?

@ParanoraVEVO 3 года назад

Quality content! Thank you

@luisbanegassaybe6685 3 года назад

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

@raulgaming1000 2 года назад

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

@femkedesign 2 года назад

Great to hear!

@tiansmusic Год назад

great videos! taught me so much :3

@femkedesign Год назад

Yay! Thank you!

@naumankhokhar6471 3 года назад

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.

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

@heathflohre5285 3 года назад

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?

@whereisjeffrey 2 года назад

This is great thank you! :)

@robmiles3845 3 года назад

Thank you

@mann8939 2 года назад

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 2 года назад

Glad to hear it!!!

@olababs2048 10 месяцев назад

this is awesome

@randybetancourt6368 Год назад

Thanks for sharing!

@femkedesign Год назад

You're welcome Randy!

@manuel_lebreault 3 года назад

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

@femkedesign 3 года назад

One step at a time :)

@CalatzOps 3 года назад

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 3 года назад

@@femkedesign I would be so interested in this!

@DarshanGajara 3 года назад

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

@jaceguden2726 2 года назад

You save my life daily no joke

@funnzypink 2 года назад

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

@femkedesign 2 года назад

You're very welcome!

@MukundJha 2 года назад

Thank you for the video.

@femkedesign 2 года назад

You're welcome

@ferreiravinicius 2 года назад

I loved much to see it. Thanksssssssss!

@femkedesign 2 года назад

Glad you enjoyed it!

@RitaPetrilli 3 года назад

Hi! is there a plugin you are using to easily highlight the specs (pink color and values) in each component? also, why do you put the specs of each component, when you already have a design system? Just to understand this better :) Thank you!

@carolynec893 3 года назад

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

@aqua123670 2 года назад

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

@femkedesign 2 года назад

Wow, thank you!

@safsafaf2838 Год назад

Great video!

@femkedesign Год назад

Cheers!

@alfredyeap8890 3 года назад

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 3 года назад

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!

@RB-bq2rq Год назад

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

@clairefenart3480 3 года назад

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.

@ryansriffs9112 3 года назад

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.

@b_dono 2 года назад

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 2 года назад

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

@amberschen1124 Год назад

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

@dsep12345 Месяц назад

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

@urifried37 3 года назад

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

@Qbabxtra 3 года назад

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

@cameroncampbell4702 Год назад

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

@femkedesign Год назад

Welcome!!

@verogasco 3 года назад

Hi, great video! Do you use any plugin for the user flow arrows?

@towersleon 3 года назад

where did you get the blue arrows in the user flow? they look amazing.

@adavidov 3 года назад

Great video! Did you create your own user flow arrows/lines/circles or is this a Figma plug-in? Thank you

@shriyashekhar4454 3 года назад

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?

@sidali8646 Год назад

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 ?

@anilyildiz77 3 года назад

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?

@DaveRino 3 года назад

Femke, how do you communicate the breakpoints for each screen?

@melissaviesca2299 3 года назад

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