How To Organize Figma Product Design Files and Design Systems (Tutorial)

Рет қаралды 40,333

3 жыл бұрын

Learn design, Figma, or review your portfolio with me: cortes.us/learn
My newsletter: getrevue.co/profile/shyboytm
In this video, I go over how I organize my Figma files for team files, personal projects, and design systems. While this is an ever-improving process, I have some foundational tips and tricks for this workflow in Figma as well as best practices! I think my solution for these is scalable and applicable to design systems or files for product design work and personal design projects.
What tips and tricks do you have for file organization that I missed? Let me know if you have any questions about anything I went over or requests for new videos!
💿 Lofi Beats to Create, Design, and Code to (Royalty Free): • Lofi Hip Hop Beats to ...
🙏 SUPPORT ME ON PATREON
Get early access to videos, participate in Q&As, get my unreleased music and Figma source files, and exclusive updates on Patreon! / shyboytm
🎧 MUSIC
Background music by Cordio (me!): cortes.us/music
Looking for a record label? Try DistroKid: distrokid.com/vip/seven/799422
Access millions of samples on Splice: splice.com/vip/fromcortes
☕ PROJECTS
Buy my iOS 14 icon set at osicons.com
Learn about Taste Notes, a coffee tracking app at tastenotes.app
💻 SETUP
Interested in my setup? Everything I use is here: www.cortes.us/tools
📹 RELATED VIDEOS
How and Why to Use an 8pt Grid for Product and Website Design in Figma (Tutorial): • How and Why to Use an ...
How to Make Resizable Buttons with Auto Layout in Figma for Product Design (Tutorial): • How to Make Resizable ...
How I Got Into Product Design and My Career: • How to Make Component ...
👋 SOCIALS
Twitter: / shyboytm
Instagram: / shyboytm
Dribbble: www.dribbble.com/shyboytm
Website: www.cortes.us
Contact: hi@cortes.us

Пікірлер: 41

@sadiamumtahnarhidi5888 2 жыл бұрын

Thank you for making these videos, Dennis! This was very easy to understand and extremely helpful. Cheers!

@mashamay1625 11 ай бұрын

Thank you very much for this video, it is very helpful and clear! Was looking for smth like that for so long

@mentadentp 3 жыл бұрын

Hey Dennis, thanks for sharing! I would love to see more details of how you organise components and design systems.

@CortesArts 3 жыл бұрын

I can do that! Also be sure to check out my multi-part series on making design systems as I touch on that a bit in those videos 👍🏼

@YashwanthP 3 жыл бұрын

Thank you Dennis. Awesome video as usual. 👏

@CortesArts 3 жыл бұрын

Thank you! Hope it's helpful :)

@DuongNguyen-yr4pv 3 жыл бұрын

Thank you very much for sharing! Super helpful for me.

@CortesArts 3 жыл бұрын

You're very welcome! Thanks for watching 🙂

@wendyliu4849 2 жыл бұрын

This is super helpful! Thank you for sharing!

@CortesArts 2 жыл бұрын

Glad to hear that, thank you! If you have any requests for other videos please let me know 🙂

@danielabbay 2 жыл бұрын

This was a really good videos thanks. I was always looking to find a video in this area.

@CortesArts 2 жыл бұрын

Glad it was helpful!

@user-hp4jc7ki4x 2 жыл бұрын

Interesting content about Organize Figma Layer!)) Thx Dennis!

@CortesArts 2 жыл бұрын

My pleasure!

@quyenta246 3 жыл бұрын

When I heard the part how you arrange the order of the layers (top left - bottom right), I burst out laughing.. couldn't believe that I missed something that is so simple for years xD Thanks for the great video!

@CortesArts 3 жыл бұрын

Happy to help! Thanks for watching :)

@ilyamiskov 3 жыл бұрын

Lovely video! One thing I would change is the vertical spacing between screens. It feels a bit cramped for my taste, but again, that's preference. Keep it up!

@CortesArts 3 жыл бұрын

Good point! I think for me just when you start having huge files with a ton of screens it helps, but definitely up to your preference of course 👍🏼

@patrickojeh 3 жыл бұрын

Thanks for this!

@CortesArts 3 жыл бұрын

Of course, hope it helps!

@aaronpaterson7582 2 жыл бұрын

Hi Great video, I have a flow states question for iPad pro 11 on Figma. In the Figma community, we have iOS UI kits etc. When I tried the iPad keyboard as you've used for the iPhone states. I don't scale evenly? Any idea how I can solve this to fit it in my screen frame?

@EstenSesto 3 жыл бұрын

Thanks Dennis. How do you manage multiple files between the entire team? We use XD now, and it's a nightmare to manage links and files across many designers / managers / clients. Do you have a video that shows file management?

@CortesArts 3 жыл бұрын

I do not currently but can definitely make one! I haven't used XD for file management but it's pretty robust in Figma actually, let me know if you have any specific questions I can go over 👍🏼

@redro111 2 жыл бұрын

Mobile only. I would have liked to see how to structure multiple screen-sizes and its breakpoints including the depth of interactions.

@CortesArts 2 жыл бұрын

When I have desktop and mobile screens I put them next to each other for easier reference for Engineering and keep them within the flow I outlined in the video! Maybe I can make a follow up video around that if it’d be helpful 😊

@natalie-taylor 3 жыл бұрын

Thank you for this tutorial! This is EXTREMELY practical, logical, and useful for me as I work with a development team. I've been looking for ways to help me with consistency as it's a struggle. If you have any additional advice on how you set up and document information for your developer(s), I'd love to learn more! Much appreciated (✿◠‿◠)

@CortesArts 3 жыл бұрын

Happy I could help! Let me know how it works for you :) I can definitely make a video around handoff to developers!

@natalie-taylor 3 жыл бұрын

That'd be fantastic! It's really hard to find ‘professional-level’ conversation around this topic. There's a bit of a gap there for sure. Thanks again for all the great information!

@krishnaar8922 3 жыл бұрын

I like to observe this file closely along with the design system styles and stuff is there any possibility you can share it with us ? thank you.

@davidluft 3 жыл бұрын

Do you ever separate your flows into individual pages?

@CortesArts 3 жыл бұрын

Not flows per say, I try and keep those together as best I can, but features yes I do. For example if an app has 4 tabs with main features then I would break those into 4 pages to help with page bloating. Definitely depends on the situation but you can for sure break them up that way if it's more helpful for your scenario.

@davidluft 3 жыл бұрын

@@CortesArts I appreciate your answer. When you design something for multiple screen widths (mobile/desktop/tablet) how do you separate those flows? Thanks, Dennis!

@Oswee 3 жыл бұрын

Yeah... for mobile dev it's nice and tidy... But now try to organize just a enterprise warehouse management app... Or some CRM... Dispatching... with bunch of data grids, modals, popups, context menus and what not...

@CortesArts 3 жыл бұрын

We do a lot of this at Mothership on the web as well, the same process and format has worked for us!

@21agdmnm Жыл бұрын

filled state ? there's no such thing.. there's active, hover, focus, visited etc

@davidluft 3 жыл бұрын

Hey Dennis! Your tutorials are incredibly helpful, but I find the video of you distracts from the guide.

@CortesArts 3 жыл бұрын

Thanks for the feedback! I think being on the screen feels better than just listening to a screen recording personally. I’ll try out some different sizing and layout maybe to help though 👍

@mjscpr 3 жыл бұрын

@@CortesArts Smaller would be better.

@CortesArts 3 жыл бұрын

@@mjscpr Will do!

@josephj5486 3 жыл бұрын

Came across your channel, it's really helpful and Well explained. Can you please share how you organized other design files too? Do we need this kind of management tool for design files organizations? en.eagle.cool

@CortesArts 3 жыл бұрын

I don't use a tool like this for other files since I mainly work with Figma and Finder, but this definitely looks useful! If it works for you would be interested to know how you use it.