“How We Organize Design Files in Figma” (+ Figma Kits) (https://lnkd.in/e4i9aNcm). With practical guidelines for keeping project files and designs neatly organized. By Lee Munroe. Good organization starts with a good cover page. It includes status, name, date/quarter and people who are involved in the project. It also has an introduction for onboarding, link to product requirements, link to the main design page and a Slack channel for reference. Each project has a state of progress that can be indicated on the title card: 🛠 Designing — default and probably the most common state ✅ Ready for Dev — we’re waiting for development to start work on it 🐑 Shepherding — we’re working with development on it ⏸ Paused — something we’ve decided no longer priority currently 🔮 Future — something we’re thinking would make a good future project 💥 Discarded — didn’t use or not useful 🚀 Shipped — now in production In general, projects follow the following folder structure: 🎨 Designs ← Design work to be referenced, for engineers, PMs. 🧱 Components ← Local components, proposals or temporary work. 🕹 Prototype ← Interactive prototype to play and see how it works. ✏️ Wireframes ← Wireframes, sketches and early ideas. 🧪 Usability Testing ← User testing, prototypes with feedback. 🕵️ Research ← Screenshots of production, competitors, past studies. 🗄 Archive ← Abandoned things that we want to keep for reference. 🔖 Kit Template ← Examples of how to lay things out, internal tools. A wonderful reminder that a good organization can go a long way to not just help designers organize their work better, but also collaborate with other people on the team or other teams — by just having a well-established file organization practice in your company. Thanks for the write-up, Lee! 👏🏽 Useful resources: File Thumbnail Kit (Figma), by Joey Banks https://lnkd.in/eJ7Amf4n Mixpanel Annotation Kit (attached cover, Figma) https://lnkd.in/dDwJ-9gm Deliveroo File Management Library (Figma) https://lnkd.in/d3_Ur9wA Spotify Ways Of Working (Figma) https://lnkd.in/ek9ZzZQg The Library + Flow Approach For Figma, by Tess Gadd https://lnkd.in/eNX4HFEm How We Organize Figma Projects, by Lee Munroe https://lnkd.in/ec7KPH2n Hygraph Organization in Figma, by Darshan Gajara https://lnkd.in/eJNQrJMw --- ✤ Design System Organization in Figma Design System Structure for Projects and Files, by Luis Ouriach https://lnkd.in/eFZUjUCU DoctoLib Design System Organization, by Jérôme Benoit https://lnkd.in/eK7bhQeS Booking Design System Organization, by Nicole Saidy https://lnkd.in/edueYQPG How To Organize A Design System (Figma Kit), by Saurav Rastogi https://lnkd.in/dWV-Y6vv How do you organize your Figma files, and what templates do you use frequently? Happy organizing, everyone! 🎉🥳 #design #figma
Vitaly Friedman are you reading minds or so? This comes in about the second I was needing it lol
Working in small startups where an entire product design and all it’s versions sits within one file I’ve also taken to working with three separate groups of desingns: 1. All things designs related, ie designs in various states of completeness, research, strategy etc, 2. Dev ready designs which are often a sub-set of the North Star designs 3. Sales ready prototypes and slideware for the sales team to have a latest stable version to demo It takes a bit of time and organisation to maintain all these versions, but it has the benefit that the entire team has something that fits them at any moments notice and they can even go in and tweak and edit for their own purposes (eg showing data related to potential customer for a demo), while I can continue building and living in the messy mode with no fear I’m messing up things others are referencing.
I suggest designers to look for Figma alternative workflows. You have Penpot which is FOSS and Sketch which works on an auto layout (Flexbox related). This file organization can be done in any of the pieces of software that I mention. Penpot has a plan to introduce a design token centered workflow, a collaboration with https://tokens.studio/studio which just released a monstrous design token management and generative graph software. https://x.com/i/status/1817769515729686624
thanks for sharing, Figma organization tips are always worth to explore from various perspectives
Thank you, this has been an issue i've been trying to solve lately!
Tagging my favorite production people to inspire Nathan Woody Grace Sbrocco
The detailed folder structure and status indicators are so helpful for maintaining clarity and efficiency Vitaly! Thanks for sharing these valuable resources and practical guidelines.
I have this task in a backlog and it is great to have your tips. Thanks!
Thanks for sharing!
Thanks for sharing Vitaly Friedman