How To Organize Figma Product Design Files and Design Systems (Tutorial)
HTML-код
- Опубликовано: 21 окт 2024
- Learn design, Figma, or review your portfolio with me: cortes.us/learn
My newsletter: getrevue.co/pr...
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/...
Access millions of samples on Splice: splice.com/vip...
☕ 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/...
📹 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.co...
Website: www.cortes.us
Contact: hi@cortes.us
Thank you very much for this video, it is very helpful and clear! Was looking for smth like that for so long
Interesting content about Organize Figma Layer!)) Thx Dennis!
My pleasure!
This was a really good videos thanks. I was always looking to find a video in this area.
Glad it was helpful!
Hey Dennis, thanks for sharing! I would love to see more details of how you organise components and design systems.
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 👍🏼
Thank you for making these videos, Dennis! This was very easy to understand and extremely helpful. Cheers!
This is super helpful! Thank you for sharing!
Glad to hear that, thank you! If you have any requests for other videos please let me know 🙂
Thank you Dennis. Awesome video as usual. 👏
Thank you! Hope it's helpful :)
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!
Happy to help! Thanks for watching :)
Thank you very much for sharing! Super helpful for me.
You're very welcome! Thanks for watching 🙂
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?
Mobile only. I would have liked to see how to structure multiple screen-sizes and its breakpoints including the depth of interactions.
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 😊
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.
Thanks for this!
Of course, hope it helps!
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!
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 👍🏼
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?
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 👍🏼
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...
We do a lot of this at Mothership on the web as well, the same process and format has worked for us!
Do you ever separate your flows into individual pages?
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.
@@CortesArts I appreciate your answer. When you design something for multiple screen widths (mobile/desktop/tablet) how do you separate those flows? Thanks, Dennis!
filled state ? there's no such thing.. there's active, hover, focus, visited etc
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 (✿◠‿◠)
Happy I could help! Let me know how it works for you :)
I can definitely make a video around handoff to developers!
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!
Hey Dennis! Your tutorials are incredibly helpful, but I find the video of you distracts from the guide.
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 👍
@@CortesArts Smaller would be better.
@@mjscpr Will do!
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
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.