Thanks for doing this Sera ♥I was also wondering on proper developer handoff, as myself being an engineer wasted countless hours discussing and reiterating through the interfaces. Now I can refer my fellow designers to this video. Design related content is very much needed on CZcams. Keep doing the great work!
Hi Abhishek, yes I guess there is no one way to do it but this is a process I developed over my career through trial and error.😁 I’m happy you find it helpful! Appreciate your support!🙏 😊
I'm loving the general approach and philosophies so thank you. I think the Autoflow approach seems like a great one however, it also seems redundant and if manual, risky to the connector visual in prototype mode. Is there a way to mitigate that?
Hey, thanks so much! I am still wondering about more of the visual things... What about spacing? What about the grid system? How do I create a design system and organize components in a way that is super parallel to how developers are thinking about it? What about product details, such as a dropdown and I need to communicate what the items will be in that dropdown?
Hey Melissa, something like a dropdown should be created as a mock because you would create all the stages that a user would go through. With Figma, you don't need to spec out designs anymore. The developer can see these details. The details of the DS depends so much on the team, in general teams often use increments of 4 or 8 for spacing and use 12 columns for desktop to space things out evenly. Spacing also depends on the device's breaking point.
Heyyyy, you don't ever write notes with the comments? I find that hitting "c" button shortcut for comments is so much easier for notes and back and forth communication on different aspects of the design.
Hey David, without rewatching the video, yeah I do use comments but primarily for communicating with teammates and gathering feedback. I like to document design decisions in a different place.
How could my front end team as viewers gather properties of animated components if figma doesn't show it? Figma doesn't let viewers interact with components
What if i create a component animation in figma using smart animate, how to handoff the animation to developers ? How he can recreate the same animation , thank y in advance
Interactions is something I recommend you chat about with the eng partner well in advance of actually creating it in Figma to understand the scope of the request if it is not an existing element and if it will be possible. They should know how to do simple animations like this. Unfortunately figma doesn't encourage good design - code parity, you can learn more about this in my podcast with Dan Mall: czcams.com/video/7jhLa3Lzt9Y/video.html
Thanks for doing this Sera ♥I was also wondering on proper developer handoff, as myself being an engineer wasted countless hours discussing and reiterating through the interfaces. Now I can refer my fellow designers to this video. Design related content is very much needed on CZcams. Keep doing the great work!
Hi Abhishek, yes I guess there is no one way to do it but this is a process I developed over my career through trial and error.😁 I’m happy you find it helpful! Appreciate your support!🙏 😊
I'm loving the general approach and philosophies so thank you. I think the Autoflow approach seems like a great one however, it also seems redundant and if manual, risky to the connector visual in prototype mode. Is there a way to mitigate that?
Hey, thanks so much! I am still wondering about more of the visual things... What about spacing? What about the grid system? How do I create a design system and organize components in a way that is super parallel to how developers are thinking about it? What about product details, such as a dropdown and I need to communicate what the items will be in that dropdown?
Also, do you think it's important how I name the layers, group the layers, and whether I convert them to symbols?
Hey Melissa, something like a dropdown should be created as a mock because you would create all the stages that a user would go through. With Figma, you don't need to spec out designs anymore. The developer can see these details. The details of the DS depends so much on the team, in general teams often use increments of 4 or 8 for spacing and use 12 columns for desktop to space things out evenly. Spacing also depends on the device's breaking point.
Heyyyy, you don't ever write notes with the comments? I find that hitting "c" button shortcut for comments is so much easier for notes and back and forth communication on different aspects of the design.
Hey David, without rewatching the video, yeah I do use comments but primarily for communicating with teammates and gathering feedback. I like to document design decisions in a different place.
Bellissimo video. Spero che tu non venga mai a contatto con un handoff nel mondo della consulenza con sviluppatori come fornitori esterni. Un incubo.
Thank ypu so much. This is really helpful for my new project
So glad you found it valuable ☺️
I always do mistake or miss something in design and because of that i got caught on my senior eyes... Any suggestion you can give me?
Can you tell me more about what kinds of mistakes you're making? You can also book a superpeer call me with me if you want more personalized advice. 😊
@@thecraftio Thanks Sera... Is there any link or number for Superpeer call on craft site?
@@AJ-fj3js It's superpeer.com/sera
Sera, thank you so much for sharing! This video is gold😊
Hey! So happy you like it😊😍
Thank you so much for this video big love ❤
My pleasure! Did you find something useful?
Thanks Sera, the tips will help a lot.
Happy to hear that Babalola!
thank you so much for making this video! super helpful
Hi Erica! 👋 My pleasure! I’m happy to hear it was helpful.😊
This is very useful info, thanks for sharing!
Hey Fernando! 👋 My pleasure glad it was helpful!
How could my front end team as viewers gather properties of animated components if figma doesn't show it? Figma doesn't let viewers interact with components
You're unable to see this in the inspect panel?
This is so informative. Thank you.
Hi Imali! That’s great!! You’re very welcome. 😊👍🎉
Prove your design knowledge by taking this quick quiz. Click here to get started: www.the-craft.io/quiz 👀
What if i create a component animation in figma using smart animate, how to handoff the animation to developers ? How he can recreate the same animation , thank y in advance
Interactions is something I recommend you chat about with the eng partner well in advance of actually creating it in Figma to understand the scope of the request if it is not an existing element and if it will be possible. They should know how to do simple animations like this.
Unfortunately figma doesn't encourage good design - code parity, you can learn more about this in my podcast with Dan Mall: czcams.com/video/7jhLa3Lzt9Y/video.html
Sera, hello from Brazil
I have a question. What do you do to show error situations to devs?
Hey Marcus! Can you tell me more?
@@thecraftio Of sure, example: User have to do a X situation, usually we do the hapyness flow. What do you do in case a forms/input error ?
On Same Page with you.
Glad this resonated with you Rohit!
looks like Airbnb desing
It is😂 That’s something I mentioned in the vid. This is an example. I cannot share my real work.