Design systems case study walkthrough: Designing components and creating documentation [Part 2]

Hello friend! This video is part 2 of a series where I walk you through a case study from my time at Wealthsimple. If you haven't watched part 1 yet, I highly recommend checking it here • Design systems case st...
In this video, we'll dive straight into the Figma file and look at how I created, set up and documented the components for this project. Enjoy!
----------------------------------------------
My channel is powered by Superpeer: www.superpeer.com
//LINKS
Get Grayscale, the font by Charli Marie: charlimarie.com/shop/grayscale
Book a mentoring session: superpeer.com/femke
//TIMESTAMPS
00:00 - Intro
01:03 - Banners
02:52 - Banners: Documentation
05:26 - Marketing cards
07:43 - Snackbars
10:07 - Snackbars: Documentation
10:50 - Modals
11:38 - Components in action: Demo
14:30 - Reflection
14:49 - Wrap up
// MORE
Join my community!: www.femke.design/community
Website: www.femke.design
Podcast: www.designlife.fm/
Twitter: / femkesvs
Instagram: / femkedotdesign
Browse my job board: pallet.xyz/list/femkedesign-j...
Join my talent collective: femkedesign-jobs.pallet.com/t...
My logo animation is done by Austin Saylor: www.austinsaylor.com/
My brand is designed by Black & White studios: www.blackandwhitestudios.nz/
Videos are edited by Molen Audiovisual: / molen.audiovisual
Thumbnails are designed by Diana Pechar: dianapechar.com/
Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/2456269/1347628/1...
//GET STARTED IN UX
Visit this link for a list of curated UX Design resources and tools: www.femke.design/resources

[@femkedesign]

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/

[@ivabeleva7749]

I love this! Love the Documentation part, the presentation and the details! Thank you so much!

[@johncarlosgatchalian8637]

This is sooooo good Femke! so helpful. Will surely try this on our component library!

[@Sofia0S0S]

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

[@brendanmchugh7201]

Really great stuff. All of your videos have been super helpful. Thank you!

[@chimeziemartins6796]

This is literally one of the best video on Design system I have seen, thanks Femke.

[@Mel-zz8xc]

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!

[@martinmind3785]

Thank you very much, Femke, I just needed this video for my first documentation job.

[@shaunsmylski]

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.

[@rubenphilip]

Super cool, well-organised files and well-presented. Thank you

[@femkedesign]

Glad you liked it!

[@drixponteres8829]

This was really helpful. Thanks Femke!

[@heylingo]

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!

[@AdamMorgan85]

"How to.. erm.. build the components" haha! 🤣 Know that feeling! Great content and walkthrough, thanks Femke!

[@whitehartco]

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

[@femkedesign]

You’re welcome Lucie!

[@JagodaGuinebault]

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.

[@zohrajayaraman1842]

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 KZbin! 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??

[@KumaPrincess08]

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

[@femkedesign]

Thanks for the suggestion!

[@adhamelkelany]

Thank you, the documentation part is amazing 🤩🤩

[@femkedesign]

Glad you liked it!

[@sebastianpertuz1493]

How to ignore autolayoud? click the component hold the spacebar and move the component! it will ignore entering to any place!

[@femkedesign]

Gamechanging!

[@ikennagibson3933]

Lol but figma has a feature that does this seamlessly. The “absolute position” feature fixes that

[@chloeatchue-mamlet6764]

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

[@shoaibux]

As always, too good. Thank you ❤

[@femkedesign]

Thanks so much :)

[@taisasevenard1997]

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?

[@lorrieuiux5802]

Great documentation! I may take some inspiration from yours as I find documentation to be quite difficult.

[@femkedesign]

Please do!

[@syedmuhammadhamza348]

I really love this design system series Femke! Thanks for sharing this, excited for this one!

[@femkedesign]

Yay! Coming tomorrow :)

[@discoteo]

your work is impressive!

[@femkedesign]

Thank you! Cheers!

[@mayyvislok]

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

[@femkedesign]

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.

[@Deanozaur]

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

[@greatndabai]

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.

[@user-ym2uv2dm8v]

This is amazing, how much time would you say it takes you to create one component?

[@veronicaibe1243]

Amazing job 👏🏼. Love how you laid this out. Just curious, is there a link or template to this Figma file?

[@femkedesign]

Not at the moment :)

[@ttisch3240]

Thanks!

[@estefanimauro7994]

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!

[@zohrajayaraman1842]

I'm also wondering this! Did you upload all this documentation somewhere like Patchwork?

[@soontiago]

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?

[@femkedesign]

This video might be helpful for ya :) kzbin.info/www/bejne/n17FaJKXmL-Wd8k

[@shirazigs]

Thanks for sharing your amazing experince! ❤ I'm glad that watched this! ⭐May I ask you why your frame size is 375 x 802?

[@femkedesign]

Thank you! No specific reason, it was the size being used by the design team.

[@shirazigs]

@@femkedesign If you want to design an app now, what size would you start with?

[@sofiaaquinogomez6947]

Which tool do u use to document? Thanks for sharing with us. Its so inspire

[@femkedesign]

Docs and figma!

[@lucadegasperi3601]

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?

[@femkedesign]

Gonna save this for a podcast topic as I think there's a lot to dive into here!

[@taniasharma]

What type of auditing template do you use?/Do you have an accessible template online for that?

[@femkedesign]

Nothing on hand at the moment! Will keep in mind tho for future resources :)

[@hara331]

Hi! How much time does it take you to complete the design of a complex component on the DS? Including documentation

[@femkedesign]

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?

[@user-ip2yq3qu1z]

Hello! at 4:04 I was wondering how we can show the red bounding box permanently in figma? Small question : )

[@tdaley]

Add a red stroke

[@daniel_rad]

looks good but the art-board group titles should be components. So if you scale that page you can increase the group titles.

[@femkedesign]

They are in the design system file! This was just the working file so was more for presentation purposes.

[@ddpaw7]

Is the link to PART 1 of this video series accidentally linked linked to this current part 2 vid?

[@ddpaw7]

I hope that helps , it’s probably no big deal ❤ I was so confused cause in the part two video description kept bringing me to part two LMAO 😂 I thought I was doing something wrong

[@femkedesign]

Oops! here is the correct link: kzbin.info/www/bejne/mIrTZJKagLWVe6c

[@joyusagi]

may I ask what the api section means in terms of uiux?

[@femkedesign]

It's for the engineers!