Hi Nolan, Bhavya here. I am learning so many things, even after having a bit of experience in the Industry. This is so much more helpful than any paid course I have done. The best part is, your narration. Figma's office hours is amazing for sure. but it is more like tutorials. your narration seems like "how to become a better designer". IMO, You are not just teaching a tool or technique, you are teaching better team work with relevant examples and real work demonstration. The reason why I am observing all these is I have been wanting to create my own YT channel about UX. I am so much passionate about finding topics, researching what currently exists, coming up with different options of narrations and most importantly engaging editing (inspired by you). If I am fortunate enough and I get a chance to assist you on your social media journey. I would learn so much. Best, Bhavya
Good on you for reaching out to him. That is very proactive thinking and your efforts will pay off. Even if he doesn't respond (though I hope he does) do not be discouraged. It will work out, just keep on trying and reaching out to different creators. All the best!
@@milanpaudel9624 if me announcing my name caused you such discomfort that you had to take few seconds out and let everyone know by replying; then, I wish you a lot of positivity. Hope you stop getting affected by things like this otherwise you will always be busy replying to such things💛 Nice name, Milan🙏❤️🩹
For large projects til approach will be a nightmare to maintain over time, consider using dev-mode and add link's to different designs instead, and most important build your handover system in conjunction with your dev team, everyone is different :)
Most developers aren't too focused on notes or hints left in Figma; we're thinking in terms of CSS and components. When designs don’t align with that mindset, it just makes the job harder.
Where is the design system? 😛 As a developer, this is what helps me create something as close as possible to the design. We rely on the design system as the single source of truth and don’t use anything else. So, if there are discrepancies between the design system and the actual design-like a typography that doesn't exist in the design system-then we stick with the design system.
I also don’t “hand off” files, that’s a newb move. Yes I make a file for devs, but it’s fully annotated and includes an interactive prototype, 1 for click through and other mini prototypes for interactions and I send in a confluence page or Google doc AFTER a live presentation and walkthrough w the whole supporting team
Thank you for the video. In my company, we already do some of these things, but there wasn't good communication between the development team and the design team, and now we're working to improve that. Your video brought great ideas, thank you.
I stopped working with design files long ago. Nowadays, I design by coding with web elements based on the agreed design language and deliver a full functioning UI working with mockup data and state management and all engineers have to do is to integrate those elements. I could get this style of handover working by studying the patterns engineers are using and now handover is not confrontational. This is also very helpful when I do some AB tests with users where I hook a test deployment with the proposed integration and let the users use it without depleting developers' time. Thanks to automated CI CD pipelines OPS team doesnt get involved either. And the features are clarified by themselves , prioritized by themselves and find a place on the actual production by themselves. I suggest anyone to take a step forward in the industry you are servicing be it a web sector , or automative industry etc. and learn the tech which only enables you and the team more while catering for deliverables.
@@nasif3089 For static features (eg. we need a ui/ux design for a download page and requirements are we will just place latest installer version to attached blob and site should dynamically render the new file with the design while keeping the previous versions), I use html, css, js . For overall dynamic features I use Nextjs (especially when the feature is dependent on many api endpoints and I can create functions on the platform with ease to bind them as I like. Also deployment with Vercel (behind Nextjs) is a breeze through github actions. (Design through coding, push to github, let Vercel handle the rest for public deployment) Currently, we are transitioning to Radix-ui as its design language aligns with our business vision. I apply the language via TailwindCss and on nextjs I use typescript so devs don't have hiccups with type issues (eg. function x I created expects a string and developer would be made aware of it immediately by the time he/she is working on the controller. So all of a sudden my designs become plug n play and everybody is happy. Thanks to this, I can fully command the desired user experience (eg. we have a tree view of 10 items each with a hierarchy of 1000 subordinates and we want to reach any item within the tree under dorothy threshold) so I would use Link component which prefetches content of a different page on mouseover event and if not no loading so that people dont have to wait and such. Also responsiveness is fully on my hands and accessibility features as well. What else would I need for helping users reducing their pain? =)
oh my god Nolan, just want to say bunch of thank you for this method. It helps me a lot as a product designer, and help engineering to easier to develop the design.. love from Indonesia
Hi, you should put the tags in description, TH-cam automatically detect them and work the same. Tags in titles just look ugly when you are on the home page
It's fun and helpful to create these documentations, but it's mostly useful for inhouse designers. As external service providers we usually have to go with quick & dirty. :D
I wish my UX/UI designers did even 1% of this. I dont even get prototypes... per screen I receive essentially a damn single image of what it is supposed to look like and he didnt even bother with multiple states, lining things up correctly or explaining what is supposed to do what. I have had so many fights about this that I seem to just lose cause no one else other then me seems to care about this because no one else expect for me and 1 other actually like doing the front end -_- Your starting example would be like a dream come true to me.
@ Sure, problems we run into a lot is for example when we don’t see how certain elements on a page react to user input or especially strange behaviour. Example i have not too long ago is that we had an entire page dedicated to an upload area where the user would upload files and those would show up in a list. This always showed a list of 6 items which perfectly matched the size of the box the upload area was in as well but not what it looked like when there were no files, 1 file or 30 files. These are behaviours i want to know about cause it can help me understand which parts need to be scrollable, if there is a list at all if there are no items in it and generally how the list is supposed to behave. It leads to a lot of on the fly rewriting of behaviours and discussions simply cause we don’t have a clear understanding of how everything is supposed to react. As a developer all of those things will need to be reflected in my code and its very annoying and time consuming when I need to go back to something I already thought was finished simply cause of unclear requirements and can make a simple task that should have taken a day at most to take multiple days of work and discussions with multiple people cause the PO, architect, PM, and designers need to talk about these things.
you can really improve your handoff documenting better your components and screens I think this is what a Junior does not a Senior. Like the way that you show the spacing issues is not the best way
Not really if you always need to present prototype for clients especially for non-tech clients. It’s easier for them to see the results without imagining it. Hahaha
He used a shortcut to apply style. He copied the style/properties of the text "Affirmation" using shortcut Command+Option+C (Mac) or Ctrl+Alt+C (Windows) and applied it on the text "Excited" by using Command+Option+V (Mac) or Ctrl+Alt+V (Windows). This is also used for the style of everything: shape, autolayout, effect, section, ... Enjoy!
Make this show up to my UI guy, not me :) I so want him to do this, guy is so lazy didn't even group elements... Good job on the video I loved everything
I think the most annoying thing between devs and designers is a lot of designers nowdays in figma stack like 5 fill colors or graidients in a single frame which is impossible to do in development due to CSS limitations. Anyway to overcome this? How can a dev recreate the exact design in a scenario like that?
It is possible :) You can use multiple linear gradients by separating with comma. Simple example background: linear-gradient(#ff5733, #ff5733) top, /* Layer 1 - Red */ linear-gradient(#44b7b8, #44b7b8) bottom; /* Layer 2 - Blue */ background-size: 100% 50%; background-repeat: no-repeat; }
For anyone interested, I am building a tool for handovers, that will have variations, breakpoints, documentation, screens on the side and an easy upload from figma, if anyone interested give me a shout I van run u a demo
Nice, yeah, this is definetly something that can be overlooked by some of those who teaches design, but i would say in that regard that they are then not very good at what they teach. They are then typically the "become a UX designer in 3months!!"-type of teacher. I for one started doing this right from the start, because i like to keep all files very tidy adn to have a nice overview and easy to scan. As you point out, this is not really just for yourself as a designer, but for the rest of the team you are working with on the projects. Nice and important video! Oh, btw..i just HAVE to..i cant stand bad contrast, and i am fairly certain your buttons will not pass the WCAG Check :D Ok, have a good one :)
2 หลายเดือนก่อน
You know whats easier and faster? using Zeplin
2 หลายเดือนก่อน
That's why I hate so much Figma.. tried to replace Zeplin and it works way better cause you tell which screen goes where, you group them and also gives you the code for styling even for android and iOS, not only web, and you can export all texts as styles, the same for color... it's 1000% better but no everyone uses figma which has no comparison to sketch, adobe or others but has a free tier.
Quick question for you and the designers out there, do you really need to design for different screen sizes and devices (For example big Android and a smaller iPhone) Please, I'm in a pickle 🫠
Really depends on the product! Basically, if there needs to be a lot of layout changes for the different sizes of phones, you should demo that. But if it’s just scaling changes or margins around the main content, you shouldn’t need to!
You can prototype the UX interaction at 7:00 It doesn’t take but a minute and saves you from typing out a book and trying to convey how a UI should work thru text. 🫨 Design doing the bare minimum so they can go grab a latte and talk.
You are a blessing. Thank you for this.
Hi Nolan, Bhavya here. I am learning so many things, even after having a bit of experience in the Industry. This is so much more helpful than any paid course I have done. The best part is, your narration. Figma's office hours is amazing for sure. but it is more like tutorials. your narration seems like "how to become a better designer". IMO, You are not just teaching a tool or technique, you are teaching better team work with relevant examples and real work demonstration.
The reason why I am observing all these is I have been wanting to create my own YT channel about UX. I am so much passionate about finding topics, researching what currently exists, coming up with different options of narrations and most importantly engaging editing (inspired by you). If I am fortunate enough and I get a chance to assist you on your social media journey. I would learn so much. Best, Bhavya
Good on you for reaching out to him. That is very proactive thinking and your efforts will pay off. Even if he doesn't respond (though I hope he does) do not be discouraged. It will work out, just keep on trying and reaching out to different creators. All the best!
@@stanford19 Your words mean so much to me. Detached from the results❤️ focused on the efforts 🫡
nobody cares about your name, stop announcing to us you are bhavya.
@@milanpaudel9624 if me announcing my name caused you such discomfort that you had to take few seconds out and let everyone know by replying; then, I wish you a lot of positivity. Hope you stop getting affected by things like this otherwise you will always be busy replying to such things💛 Nice name, Milan🙏❤️🩹
Couldn't agree more! Bhavya
I'm currently doing a UX course and they haven't really covered handovers so this was a really great insight! Thank you :)
Same here, let’s connect
For large projects til approach will be a nightmare to maintain over time, consider using dev-mode and add link's to different designs instead, and most important build your handover system in conjunction with your dev team, everyone is different :)
Most developers aren't too focused on notes or hints left in Figma; we're thinking in terms of CSS and components. When designs don’t align with that mindset, it just makes the job harder.
Where is the design system? 😛 As a developer, this is what helps me create something as close as possible to the design. We rely on the design system as the single source of truth and don’t use anything else. So, if there are discrepancies between the design system and the actual design-like a typography that doesn't exist in the design system-then we stick with the design system.
Engineer here - don't do this. Use Figma's native annotations feature or just put text boxes next to things. This looks cluttered.
Agree 1000000%
I also don’t “hand off” files, that’s a newb move. Yes I make a file for devs, but it’s fully annotated and includes an interactive prototype, 1 for click through and other mini prototypes for interactions and I send in a confluence page or Google doc AFTER a live presentation and walkthrough w the whole supporting team
Devs LOVE prototypes in my experience, btw I’m a staff level
@@itshadouken as a dev, yes I love prototypes! Lets me play with and understand exactly how things interact and what I need to build ❤️
As a ux/ui and full stack dev I’m agree with u
Thank you for the video. In my company, we already do some of these things, but there wasn't good communication between the development team and the design team, and now we're working to improve that. Your video brought great ideas, thank you.
My suggestion would be to create chapter in the video. Other than that, well put together.
Thank you for the suggestion!
@@radnolan You can add them just by including timestamps with annotations in the video's description. Takes just a minute.
@@radnolan Are you against feedback or something?
absolutely! i wanna learn the context
Seriously this vid was so confusing to follow
20:24 It's better to copy and paste the connector line from the FigJam board, it's easier than using the pen tool.
Hi Nolan, great video! Make us a designer collaboration video(s) from A-Z like how to collaboration with other designers on a single project.
I stopped working with design files long ago. Nowadays, I design by coding with web elements based on the agreed design language and deliver a full functioning UI working with mockup data and state management and all engineers have to do is to integrate those elements. I could get this style of handover working by studying the patterns engineers are using and now handover is not confrontational. This is also very helpful when I do some AB tests with users where I hook a test deployment with the proposed integration and let the users use it without depleting developers' time. Thanks to automated CI CD pipelines OPS team doesnt get involved either. And the features are clarified by themselves , prioritized by themselves and find a place on the actual production by themselves.
I suggest anyone to take a step forward in the industry you are servicing be it a web sector , or automative industry etc. and learn the tech which only enables you and the team more while catering for deliverables.
which tools or languages do you use to do this?
@@nasif3089 For static features (eg. we need a ui/ux design for a download page and requirements are we will just place latest installer version to attached blob and site should dynamically render the new file with the design while keeping the previous versions), I use html, css, js .
For overall dynamic features I use Nextjs (especially when the feature is dependent on many api endpoints and I can create functions on the platform with ease to bind them as I like. Also deployment with Vercel (behind Nextjs) is a breeze through github actions. (Design through coding, push to github, let Vercel handle the rest for public deployment)
Currently, we are transitioning to Radix-ui as its design language aligns with our business vision. I apply the language via TailwindCss and on nextjs I use typescript so devs don't have hiccups with type issues (eg. function x I created expects a string and developer would be made aware of it immediately by the time he/she is working on the controller. So all of a sudden my designs become plug n play and everybody is happy.
Thanks to this, I can fully command the desired user experience (eg. we have a tree view of 10 items each with a hierarchy of 1000 subordinates and we want to reach any item within the tree under dorothy threshold) so I would use Link component which prefetches content of a different page on mouseover event and if not no loading so that people dont have to wait and such.
Also responsiveness is fully on my hands and accessibility features as well. What else would I need for helping users reducing their pain? =)
You remember number of color is incredible 😮❤
oh my god Nolan, just want to say bunch of thank you for this method. It helps me a lot as a product designer, and help engineering to easier to develop the design.. love from Indonesia
Thanks for your time; it is an extremely informative video, and I wish to see more.
Great vid and content as always! Keen to see how you would handle versioning updates of these handovers on a significantly bigger scale / app.
This could be a great video idea!
Hi, you should put the tags in description, TH-cam automatically detect them and work the same.
Tags in titles just look ugly when you are on the home page
Hey thank you for this I will take this into consideration!
Thank you Nolan, I've been searching this tutorial for a while 🙏🙏🙏
Tip for dev notes - you can bring in stickies from figjam they usually apply authors name on the stickies based on who edited it the last time
Thank you so much for this!
This is very insightful 🙌
Glad you think so!!
Thank you so much! This is so much more helpful
You're so welcome!
I'm a developer who learns it to know how to do a design, these times front-end(moved to full-stack) need to work as whole team 😅
It's fun and helpful to create these documentations, but it's mostly useful for inhouse designers. As external service providers we usually have to go with quick & dirty. :D
I wish my UX/UI designers did even 1% of this. I dont even get prototypes... per screen I receive essentially a damn single image of what it is supposed to look like and he didnt even bother with multiple states, lining things up correctly or explaining what is supposed to do what. I have had so many fights about this that I seem to just lose cause no one else other then me seems to care about this because no one else expect for me and 1 other actually like doing the front end -_-
Your starting example would be like a dream come true to me.
Sounds like your company needs a new UX designer. They hiring?
I am confused. Some devs here saying this won't help them but rather the design system. But to you you find it useful.
Designer here - Can you tell what problems you face as a developer while getting design files from the designer?
This would help a lot.
Designer here - Can you tell what problems you face as a developer while getting design files from the designer?
This would help a lot.
@ Sure, problems we run into a lot is for example when we don’t see how certain elements on a page react to user input or especially strange behaviour. Example i have not too long ago is that we had an entire page dedicated to an upload area where the user would upload files and those would show up in a list. This always showed a list of 6 items which perfectly matched the size of the box the upload area was in as well but not what it looked like when there were no files, 1 file or 30 files. These are behaviours i want to know about cause it can help me understand which parts need to be scrollable, if there is a list at all if there are no items in it and generally how the list is supposed to behave. It leads to a lot of on the fly rewriting of behaviours and discussions simply cause we don’t have a clear understanding of how everything is supposed to react. As a developer all of those things will need to be reflected in my code and its very annoying and time consuming when I need to go back to something I already thought was finished simply cause of unclear requirements and can make a simple task that should have taken a day at most to take multiple days of work and discussions with multiple people cause the PO, architect, PM, and designers need to talk about these things.
This is so helpful; thank you!!!
Glad it was helpful!
What if something was ready for dev out of three screens but one of them was redesigned, then how to make a note of that for the devs?
Thank you! It helps alot
Glad it helped!
very helpful
where are those illustrations from? Super cute, especially the guy with 3-eyed cat
This is insightful
thank you!
Came onto YT to find something like this. This gave me what I was looking for and more. I won't be using commenting for hand off again!
Im glad this helped!!!
Great🎉 May I ask which type of mechanical keyboard and switches are being used
you can really improve your handoff documenting better your components and screens I think this is what a Junior does not a Senior. Like the way that you show the spacing issues is not the best way
TRUE! designing ALL the screens and interactions is a complete waste of time lol
That's my point... I'm literally right now in the same damn situation
Not really if you always need to present prototype for clients especially for non-tech clients. It’s easier for them to see the results without imagining it. Hahaha
@@kaedeharakazuha1081 motha's need to learn some imagination. Always asking for stuff they have no idea about.
Thanks for the video 😁 I was wondering how did you drag the font style of 'Affirmation' and apply it to Excited text at 9:26
Thanks :)
He used a shortcut to apply style. He copied the style/properties of the text "Affirmation" using shortcut Command+Option+C (Mac) or Ctrl+Alt+C (Windows) and applied it on the text "Excited" by using Command+Option+V (Mac) or Ctrl+Alt+V (Windows).
This is also used for the style of everything: shape, autolayout, effect, section, ...
Enjoy!
Which tools do you recommend for UX designers that are most useful for current trends and future advancements?
Make this show up to my UI guy, not me :) I so want him to do this, guy is so lazy didn't even group elements... Good job on the video I loved everything
I think the most annoying thing between devs and designers is a lot of designers nowdays in figma stack like 5 fill colors or graidients in a single frame which is impossible to do in development due to CSS limitations.
Anyway to overcome this? How can a dev recreate the exact design in a scenario like that?
It is possible :) You can use multiple linear gradients by separating with comma. Simple example
background:
linear-gradient(#ff5733, #ff5733) top, /* Layer 1 - Red */
linear-gradient(#44b7b8, #44b7b8) bottom; /* Layer 2 - Blue */
background-size: 100% 50%;
background-repeat: no-repeat;
}
lol, being junior I was doing this shit, now i'm doing as junior 😂
How did you copy the line's style???!!!!
This is done on figma?
I DON'T WANT PEACE, I WANT PROBLEMS, ALWAYS
You use macbook to work?
Hey I have a MacBook and iMac!
For anyone interested, I am building a tool for handovers, that will have variations, breakpoints, documentation, screens on the side and an easy upload from figma, if anyone interested give me a shout I van run u a demo
need timestamps
Nice, yeah, this is definetly something that can be overlooked by some of those who teaches design, but i would say in that regard that they are then not very good at what they teach. They are then typically the "become a UX designer in 3months!!"-type of teacher. I for one started doing this right from the start, because i like to keep all files very tidy adn to have a nice overview and easy to scan. As you point out, this is not really just for yourself as a designer, but for the rest of the team you are working with on the projects. Nice and important video! Oh, btw..i just HAVE to..i cant stand bad contrast, and i am fairly certain your buttons will not pass the WCAG Check :D Ok, have a good one :)
You know whats easier and faster? using Zeplin
That's why I hate so much Figma.. tried to replace Zeplin and it works way better cause you tell which screen goes where, you group them and also gives you the code for styling even for android and iOS, not only web, and you can export all texts as styles, the same for color... it's 1000% better but no everyone uses figma which has no comparison to sketch, adobe or others but has a free tier.
noiceee.
noiceeeeee
23:26 Honestly you lost it here. This won't make the dev's life easier.
Brown Kenneth White Laura Thompson Patricia
Anderson Lisa Garcia Jason Garcia Robert
lemme send this to my teammates lmao
lmao
Thomas Paul Miller Elizabeth Clark Michael
Davis Daniel Robinson Larry Hernandez Anna
White Ruth Martinez Larry Perez Timothy
Wilson Jose Lopez Joseph Jackson Gary
Hall Maria Robinson Deborah Martinez Robert
Moore Maria Williams Paul Smith Thomas
Johnson Jose Rodriguez Jeffrey Martinez Betty
Rodriguez Eric Harris Linda Martinez Paul
Johnson Daniel Thomas Jennifer Thompson Linda
Allen Linda Johnson Mark Johnson Dorothy
Wilson Edward Walker Laura Walker Maria
Jones Karen Jackson Thomas Miller Anthony
Jackson Jeffrey Rodriguez Jeffrey Brown Mark
Miller Maria Harris Joseph Harris Betty
Johnson Karen Walker Frank Anderson Amy
my company makes us use adobe xd
that hurts lmao
lol
Quick question for you and the designers out there, do you really need to design for different screen sizes and devices (For example big Android and a smaller iPhone)
Please, I'm in a pickle 🫠
Really depends on the product! Basically, if there needs to be a lot of layout changes for the different sizes of phones, you should demo that. But if it’s just scaling changes or margins around the main content, you shouldn’t need to!
07676 Lind Lane
You can prototype the UX interaction at 7:00 It doesn’t take but a minute and saves you from typing out a book and trying to convey how a UI should work thru text. 🫨 Design doing the bare minimum so they can go grab a latte and talk.
Thompson Steven Rodriguez Betty Garcia Nancy
Davis Carol Lewis Scott Jackson Cynthia
Martin Sarah Martinez Nancy Smith Lisa
Moore Laura Harris Jason Jackson Amy
Wilson George Anderson Ruth Jones Michelle