Super grateful to Superpeer for being a sponsor of my channel! Check out Superpeer here. Superpeer is a great way to connect with mentors and join a community to help you grow! Check it out at superpeer.com/
It's incredible to see how well you present your work on video. I'd be interested to see how you use video to empower your communication with your team. Whether that is the asynchronous presentation of design iterations for others to review, reviews of other people's work, or developer handoffs.
It was super helpful thank you! Will share your tips with my team and get feedback. We already create documentation and make prototypes for interaction but adding the detailed layout with showing exactly how it's designed is a super awesome addition, as well as the dos and donts. Thank you :)
At 14:00 - a simple way to fix this problem in Figma is to click the absolute position button in the top right of the properties panel. Absolute position makes it easy to maintain the same layer hierarchy, but the absolutely positioned element is ignored by auto layout
The best way is to hold down "spacebar" when dragging an item to a frame with auto-layout. The item will remain on top and not snap into the auto layout.
@@ikennagibson3933 absolute positioning is great when you still want the item to be part of the frame with autolayout, but that's not always the case. Sometimes I don't even want it in the frame, so absolute positioning doesn't make sense.
This is one of my favorite videos by you!! Thank you for all the specifics and examples. It can be hard to find real-world examples on TH-cam! Did you upload all this documentation somehow outside of Figma? (Patchwork?) Can we see what that looks like? Does it feel like a duplication of work??
love this, so helpful and such a thorough example to pull from. Would love any insight you have on designing components for multi-platform design systems!
Yay, great thorough case study! Thank you for all the effort you put in it. One quick question: I was quite surprised that you have never worked with design systems/making components before. I would presume that working at Uber you would have to do that and it's necessary to be fluent in components and design system creation when you want to apply for senior roles. At least this is what I caught myself thinking, but I am super interested what is your take on this. Not being fully experienced with working in design systems yet, stopped me from applying for more senior roles.
Thank you! Really loved the part with the container for the developers! You said you didn't wok with the components before. Do you think components and auto layouts are essential for design work?
Thanks for this! The docs overview was super useful, how was your experience sharing the docs with engineers? And how have you seen them interacting with it? I’ve been thinking of creating something similar for engineers, almost like a design guide for engineers
Once again: great work! :D I was wondering how does "Patchwork" look like? Does it contains all the main components, fonts, color, etc? I can imagine you built the documentation on a separated file, didn't you? Thanks!
As a person who both designs and develops software, I admire the effort visual designers put into creating high fidelity prototypes and use guides while at the same time feel like they are a huge waste of time since things always have to be done twice. One time in Figma and one time in code. I feel like the tools have changed but the way we work hasn't. We are still doing the same PSD to HTML, this time it's Figma to React. Since you are quite well known among designers, I wanted to know your opinion on the matter. Do you believe this divide between design and engineering is the ideal sweet spot or are there barriers to be removed?, if so, which ones? Wouldn't you feel better if your work was more impactful to the engineers you work with?
Awesome sharing. How would you measure the 'time savings' for designers, assuming you want to use this as a portfolio piece? Alternatively, what can you say in the 'outcomes' section of the case study?
This is so hard to answer. It honestly depends on process, the components, use cases, resourcing, priorities etc etc. What is the definition of complex?
![Design systems case study: messaging components [Part 1]](http://i.ytimg.com/vi/bYp3_dKPbEE/mqdefault.jpg)
![Design systems case study: messaging components [Part 1]](/img/tr.png)
Super grateful to Superpeer for being a sponsor of my channel! Check out Superpeer here. Superpeer is a great way to connect with mentors and join a community to help you grow! Check it out at superpeer.com/
This is literally one of the best video on Design system I have seen, thanks Femke.
Thank you so much! I’ve seen a lot of videos about design systems, but yours was definitely the most useful with the documentation info
Thank you very much, Femke, I just needed this video for my first documentation job.
"How to.. erm.. build the components" haha! 🤣 Know that feeling! Great content and walkthrough, thanks Femke!
It's incredible to see how well you present your work on video. I'd be interested to see how you use video to empower your communication with your team. Whether that is the asynchronous presentation of design iterations for others to review, reviews of other people's work, or developer handoffs.
Hi! Thanks for this... It has helped me as an starting point of a really big DS that I'm working on as a solo designer :)
Bests from Argentina!
Super cool, well-organised files and well-presented. Thank you
Glad you liked it!
This was really helpful. Thanks Femke!
This is a great example of how to use a nested component - a new feature in figma. Please do more videos explaining this nested options :)
Thanks for the suggestion!
Really great stuff. All of your videos have been super helpful. Thank you!
It was super helpful thank you! Will share your tips with my team and get feedback. We already create documentation and make prototypes for interaction but adding the detailed layout with showing exactly how it's designed is a super awesome addition, as well as the dos and donts. Thank you :)
You’re welcome Lucie!
I love this! Love the Documentation part, the presentation and the details! Thank you so much!
At 14:00 - a simple way to fix this problem in Figma is to click the absolute position button in the top right of the properties panel. Absolute position makes it easy to maintain the same layer hierarchy, but the absolutely positioned element is ignored by auto layout
The best way is to hold down "spacebar" when dragging an item to a frame with auto-layout. The item will remain on top and not snap into the auto layout.
your work is impressive!
Thank you! Cheers!
This is sooooo good Femke! so helpful. Will surely try this on our component library!
How to ignore autolayoud? click the component hold the spacebar and move the component! it will ignore entering to any place!
Gamechanging!
Lol but figma has a feature that does this seamlessly. The “absolute position” feature fixes that
@@ikennagibson3933 absolute positioning is great when you still want the item to be part of the frame with autolayout, but that's not always the case. Sometimes I don't even want it in the frame, so absolute positioning doesn't make sense.
Thank you, the documentation part is amazing 🤩🤩
Glad you liked it!
This is one of my favorite videos by you!! Thank you for all the specifics and examples. It can be hard to find real-world examples on TH-cam!
Did you upload all this documentation somehow outside of Figma? (Patchwork?) Can we see what that looks like? Does it feel like a duplication of work??
love this, so helpful and such a thorough example to pull from. Would love any insight you have on designing components for multi-platform design systems!
I really love this design system series Femke! Thanks for sharing this, excited for this one!
Yay! Coming tomorrow :)
Great documentation! I may take some inspiration from yours as I find documentation to be quite difficult.
Please do!
Yay, great thorough case study! Thank you for all the effort you put in it. One quick question: I was quite surprised that you have never worked with design systems/making components before. I would presume that working at Uber you would have to do that and it's necessary to be fluent in components and design system creation when you want to apply for senior roles. At least this is what I caught myself thinking, but I am super interested what is your take on this. Not being fully experienced with working in design systems yet, stopped me from applying for more senior roles.
As always, too good. Thank you ❤
Thanks so much :)
Thank you! Really loved the part with the container for the developers! You said you didn't wok with the components before. Do you think components and auto layouts are essential for design work?
This is amazing, how much time would you say it takes you to create one component?
Hello! at 4:04 I was wondering how we can show the red bounding box permanently in figma? Small question : )
Add a red stroke
Thanks!
Thanks for sharing your amazing experince! ❤ I'm glad that watched this! ⭐May I ask you why your frame size is 375 x 802?
Thank you! No specific reason, it was the size being used by the design team.
@@femkedesign If you want to design an app now, what size would you start with?
Thanks for this! The docs overview was super useful, how was your experience sharing the docs with engineers? And how have you seen them interacting with it?
I’ve been thinking of creating something similar for engineers, almost like a design guide for engineers
I'm sure they'd love it! Honestly these things are best done in collaboration, so I'd chat with them about what they want/need.
Once again: great work! :D I was wondering how does "Patchwork" look like? Does it contains all the main components, fonts, color, etc? I can imagine you built the documentation on a separated file, didn't you? Thanks!
I'm also wondering this! Did you upload all this documentation somewhere like Patchwork?
As a person who both designs and develops software, I admire the effort visual designers put into creating high fidelity prototypes and use guides while at the same time feel like they are a huge waste of time since things always have to be done twice. One time in Figma and one time in code. I feel like the tools have changed but the way we work hasn't. We are still doing the same PSD to HTML, this time it's Figma to React.
Since you are quite well known among designers, I wanted to know your opinion on the matter. Do you believe this divide between design and engineering is the ideal sweet spot or are there barriers to be removed?, if so, which ones? Wouldn't you feel better if your work was more impactful to the engineers you work with?
Gonna save this for a podcast topic as I think there's a lot to dive into here!
Awesome sharing. How would you measure the 'time savings' for designers, assuming you want to use this as a portfolio piece? Alternatively, what can you say in the 'outcomes' section of the case study?
This video might be helpful for ya :) th-cam.com/video/i-b7_acZcAg/w-d-xo.html
What type of auditing template do you use?/Do you have an accessible template online for that?
Nothing on hand at the moment! Will keep in mind tho for future resources :)
Amazing job 👏🏼. Love how you laid this out. Just curious, is there a link or template to this Figma file?
Not at the moment :)
Hi! How much time does it take you to complete the design of a complex component on the DS? Including documentation
This is so hard to answer. It honestly depends on process, the components, use cases, resourcing, priorities etc etc. What is the definition of complex?
Which tool do u use to document?
Thanks for sharing with us. Its so inspire
Docs and figma!
may I ask what the api section means in terms of uiux?
It's for the engineers!
looks good but the art-board group titles should be components. So if you scale that page you can increase the group titles.
They are in the design system file! This was just the working file so was more for presentation purposes.