ฝัง
- เผยแพร่เมื่อ 16 พ.ค. 2024
- Hi designer! This is a continuation of the topic from last week, working with engineers. In this video I focus on the specific touch points with engineers when working together on a project. I also share how I like to do handoff and ensure that things go smoothly.
⏱ CHAPTERS
00:00 Intro to working with engineers for handoff
02:27 Handoff process step-by-step
03:01 Kickoff
03:24 Design
03:49 Mocks
04:32 Handoff checklist of items and tasks
06:00 Design QA
07:35 Design Stakeholder Signoff
07:44 Figma Walkthrough
⭐️ HOW WE CAN HELP YOU
◦ Get coached 👉🏽 www.the-craft.io/coaching
◦ Become a designer 👉🏽 www.the-craft.io/introtoprodu...
◦ Join our job collective 👉🏽 thecraft.pallet.com/talent/we...
◦ Get business advice 👉🏽 www.the-craft.io/offers/Jvnyr...
🎒 DESIGN BOOTCAMP I RECOMMEND
◦ Get $1,000 off w my code SERASB1000 | www.springboard.com/
👩🏻💻 MY TOOLS
◦ WEBFLOW is a no-code platform for creating websites. | webflow.grsm.io/sera
💡 BUSINESS INQUIRIES
◦ www.the-craft.io/business
🤳 LEARN WHERE YOU'RE AT
Insta: / thecraft.io
LI: / the-craft-io
Sera's Insta: / seratajima
Sera's Tiktok: / seratajima
Sera's LI: / seratajima
⚡️ FAQ
The Craft is an American design consulting firm. It was founded by Principal Designer, Sera Tajima. Sera has worked with global tech companies including BetterUp, Webflow, Hired, MessageBird, and Zendesk. - วิทยาศาสตร์และเทคโนโลยี
![ตรงที่เดิม - ฝน พรสุดา [ต้นฉบับ :เบส ขวางหวัน]](http://i.ytimg.com/vi/c5YnbGEztI8/mqdefault.jpg)
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 TH-cam. 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!🙏 😊
Sera, thank you so much for sharing! This video is gold😊
Hey! So happy you like it😊😍
thank you so much for making this video! super helpful
Hi Erica! 👋 My pleasure! I’m happy to hear it was helpful.😊
This is so informative. Thank you.
Hi Imali! That’s great!! You’re very welcome. 😊👍🎉
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 ypu so much. This is really helpful for my new project
So glad you found it valuable ☺️
This is very useful info, thanks for sharing!
Hey Fernando! 👋 My pleasure glad it was helpful!
This was refreshing.
Glad that resonated! 😊
Thank you.
Of course! My pleasure!😊
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.
Bellissimo video. Spero che tu non venga mai a contatto con un handoff nel mondo della consulenza con sviluppatori come fornitori esterni. Un incubo.
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 ?
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.
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: th-cam.com/video/7jhLa3Lzt9Y/w-d-xo.html
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
Prove your design knowledge by taking this quick quiz. Click here to get started: www.the-craft.io/quiz 👀
On Same Page with you.
Glad this resonated with you Rohit!
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?
looks like Airbnb desing
It is😂 That’s something I mentioned in the vid. This is an example. I cannot share my real work.
nothing
everything