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

Подписаться 83 тыс.

Просмотров 29 тыс.

50% 1

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

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 67

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

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

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

@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

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

@chimeziemartins6796 Год назад

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

@brendanmchugh7201 Год назад

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

@martinmind3785 8 месяцев назад

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

@drixponteres8829 Год назад

This was really helpful. Thanks Femke!

@rubenphilip Год назад

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

@femkedesign Год назад

Glad you liked it!

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

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

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

@AdamMorgan85 Год назад

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

@adhamelkelany Год назад

Thank you, the documentation part is amazing 🤩🤩

@femkedesign Год назад

Glad you liked it!

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

@shoaibux Год назад

As always, too good. Thank you ❤

@femkedesign Год назад

Thanks so much :)

@discoteo Год назад

your work is impressive!

@femkedesign Год назад

Thank you! Cheers!

@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 RU-vid! 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??

@ttisch3240 4 месяца назад

Thanks!

@lorrieuiux5802 Год назад

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

@femkedesign Год назад

Please do!

@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 7 месяцев назад

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

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

@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 :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-i-b7_acZcAg.html

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

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

@user-ip2yq3qu1z 11 месяцев назад

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

@tdaley 10 месяцев назад

Add a red stroke

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

@syedmuhammadhamza348 Год назад

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

@femkedesign Год назад

Yay! Coming tomorrow :)

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bYp3_dKPbEE.html

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

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

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