Looking for a jumping off point? Personally, I think this approach works really well if you have more than 5 or 6 squads working on your product. So I cant stress enough how important it is to keep your filing systems as simple and easy to maintain as possible. For example, if you see the same typography in size 14 and size 15, perhaps you should combine them. I wrote last month about organizing information inside Figma files. There was a talk about organizing files for handoff, it was great. Browsing clients directly will make it easier to look for a project. I must mention that it can differ from company to company, I write what I think the menu should include, but you should think about what works best for your team. How to organize your design file on Figma chunbuns 151K subscribers Subscribe 6.7K Share 155K views 1 year ago #productdesign #uxdesigner #fileorganization How I organize my design files. It is unlikely that you will publish these file types. Choose the right setting for you whether you are a product, an agency, or any other complex organization. For inspiration, take a look at the Figma Community. Rather just give your components properties. Your library file types are the files that you publish so that all your team members can use those symbols. Hopefully, this will inspire you to create a well-structured Figma file template. The cards underneath the title allow designers to link to documents, research, request tickets, or even to external whiteboards related to the feature on the page. For a deep dive into component organization and usage, check out the articles "Mastering Figma Components: A Practical Guide" and "Empower your Designs with Components in Figma.". (Note: The details title should be the same as the page label in the left sidebar.). When setting up your flow files, you want to make a system easy to pass between different designers and easy to understand and update. Device-type emojis can be used on pages next to the state to indicate what platform you are designing for. Tip: Put the latest date at the top to find and reference what you need quicker. By reusing components and styles, you can ensure that your design elements remain cohesive and aligned with your brand guidelines. You may wonder, how do you handle multiple documents in Figma? Therefore, its more complex if the information on the screen and the layout do not organize well. Every company is different, and you may end up with a smaller or larger base structure for your organization. After you finish the work, you can discuss the topic with the design manager. As product designers, we should organize the Figma files inside the file browser so we can find the info were looking for much easier. A tools section: a place where all the tools the designers use. Another idea you can do is add the app icon. a composition notebook emoji). Select the layers which you wanna add in component. It's all particular to your company and the way you are organized, so you may find another approach to be more suited to your organization. This way, their file browser will be a lot cleaner. Then next, you have molecules that are made up of atoms. To understand how this process works, let's take a deeper dive into the Feature project setup. During the design to developer handoff process, ensuring that the information we send to the developers is accurate and error-free is critical. With the. You could also split the teams by platforms (Product A- iOS, Product A - Web) if it helps you. Work not organized can cause chaos in your files and slow your workflow. Likewise, TE-SC-ED-CO could be about a teacher editing a course for their school. Finally, I would number these screens to work as a book when I exported them to Zeplin. Once your teams and projects are set up for success, you can create a file structure thatll make your design process feel as smooth as butter. This ensures that when you're publishing your libraries, it's manageable, and you can be relatively confident that whatever needs to be published is ready to go out to the wider design org. Having a project for each client allows you to easily keep . TWIG-812 refers to the ticket number from your project management software, like Jira, Asana, Notion, Monday.com, Linear, and so on. Working in a design team requires an organized approach, so everyone can easily find what they are looking for. For example, I dont think giving edit permission to a product manager or developer from the product team is a smart idea. That way, all the information about the product is located in one place, and it is easy to find the information. Moreover, maintaining a whole Figma organization is hard enough, don't rely too heavily on external solutions, as you may become too dependent on updates and maintenance. Create a frame for the team details and another for the page status legend. *Im not sure if anyone else does this, but I like to add the Jira ticket number to the component description. Best practices for managing file organization, If you usually carry out a lot of image-heavy research, keep this inside a separate file. Thank you for reading the article. Each designer would work within their own branch, testing out their ideas, gathering feedback, creating prototypes, and ultimately pushing it through the development process. Every time I needed to add a new symbol, I would update ALL the pages numbers. If yes, it makes sense to be in the same file. And by golly, the first ten components I did like this looked and the next few looked okay, then the next 30 not so much. Cards: Content cards, people cards, product cards. Private to this file: Components you created in this file, but didn't publish to the Team Library. Much like housework, it is an ongoing task and will never truly be done. While I would never claim to be the domestic goddess of Figma files, I have learned a few things along the way (mostly through trial and error) that I want to share with you. Develop a style guide that includes typography, color schemes, and other design elements to ensure consistency across your projects. You know the drill. If youre looking for a file, its best to use the search input to find it much faster. That is, they use the Teams feature to split out the different product areas or teams within Spotify. One of the most important things to consider when using Figma is how to organize your files. However, changing my button text from being #333 to #222 isnt high on anyones list. We are only working on 1 single product right now and I think separating screens in files would be sufficient enough. It still gives me nightmares today. Figma's auto-layout feature allows you to create flexible designs that adapt to different screen sizes and orientations. The black title header is where you will name the flow or scenario for this container, and optionally you can add a short description underneath. Besides, it can show the new hire how professional the design team is. The result will be a clear UI kit and a great starting point for building a design system with design tokens. This freedom means a lot of flexibility, which is why a robust file structure thats consistent across your organization can help you ship products faster. The first is correctly setting up the thumbnail cover and file name. However, if you are part of a new small team or start-up, this will hopefully help you put the structure in place to build out your first projects. Collaboration Keeping files organized for your team As developers get access to design files, which are filled with dozens of in-progress frames, iterations, components, and more, it's good practice to communicate which parts of the files are ready for implementation and which are still being worked on. One of the significant challenges with any structure, no matter the tool, is knowing the design process: which design files are in progress, which ones are explorations or tests, which ones are outdated or deprecated and which ones actually reflect the final product. For each color style, create a rectangle. Raquel Piqueras, a designer at Microsoft, uses color-coded thumbnails to relay the status of any given project at a glance. Try us risk free for 7 days, if you dont love us, get your money back. This is also an excellent way to get more visual consistency, and it's easier to read. Once youve added a cover frame, you can design it! Naming User inputs: Text field symbols, dropdown symbols, radio button symbols, checkbox symbols, toggle button symbols, rich text editors, and image/document uploaders. File organization might feel like a chore at first. This also allows for granular permissions across projects and teams, which is really handy when you have a big design org. It's an excellent way to have exactly what fits your needs and control the evolution and maintenance. Select all the artboards, go to the properties menu, and ensure all the colors are associated with styles. The blue header is for labeling every screen frame you add to the container. If you need to work on a new feature like Add new form fields to the authentication flow, you could use branches to manage the designupdates. The page structure of dreams consistsof: If you want to uplevel your page structure, you can even include spacer pages in your side panel so that theres a clearer distinction between phases. In a design team, youre likely to have another designer working on the file one day. Ad hocThis is just a section for all the little bits and pieces that arent really flows or libraries. By setting up a team library, you can ensure that everyone on your team has access to the latest design elements, promoting consistency and collaboration. These could be search fields that are made up of buttons and text inputs. Not only will editing your design files in Figma be a nightmare, but you'll also run into problems on the zeroheight side when our servers try and keep your files in sync. File covers are more than just an aesthetic. Related: Atomic Design: Building Scalable Design Systems. Why? This is a case that many designers are familiar with in the design industry. When I first started out, I put all my library elements into one file. I propose introducing a basic categorization system through Folders or Tags for users who do not require the collaborative features of Projects but still need to organize their draft files effectively. Using Figmas component description field, you can meet these techniques in the middle and satisfy both design and engineering teams. However, an interesting option would be to build your own plugins to maintain your prototypes and your system and speed up your workflow. Find all the typography in the file and replace it with the styles. It will take longer now but will pay off later. Figma can be integrated with popular project management tools like Trello, Asana, and Jira, allowing you to streamline your design workflow and keep your team on the same page. However, to make sure that communication is clear, one suggestion is to have some form of status on your libraries and components. In some companies, the DesignOps designers can help with this task. With this in mind, youll want to think about how well and how often you communicate with the development team within your organization. Registration-flow-v1-final10.jpg, anyone? These can be done on projects and files and on individual pages within the Figma files. Then lastly you have templates that are made up of components. For some, it'll be a platform split (like iOS, Android, and web). With a clear organization, the collaboration between the team members will be better, and the designers will be able to work more efficiently and effectively because all members can find what they need faster. They can also help you and your team be more organized and communicate better. Why organizing the Figma files is important. *There isnt a tablet emoji (lame), so I use a phone with an arrow. Naming layers is not only the butt of many a design joke, its something that can divide teams and impact implementation. Then next, you have components that are made up of molecules. ), Designs are done and ready to be shipped: . With your screen designs archived, you quickly go back and reference something without having to go through the version history. Keep the same naming convention everywhere: in your Figma files, in your zeroheight, when you talk to your colleagues, etc. For small teams, you can divide it this way: For big teams, you can divide it this way: You can use the product name for the team. This approach helps you maintain a clean and organized workspace, making it easy for team members to navigate and locate specific assets. Now all the colors in the File will be connected to a style. It will clean the file and make it easy to work. By establishing a well-defined workflow, you can ensure that your designs evolve smoothly from initial concepts to final deliverables, facilitating effective collaboration and reducing the risk of errors. Combine and cluster colors that look the same (Optional). Optionally, you can copy and paste the user flow frame to this page to help you keep your concepts more organized. There are two things to remember when creating master symbols: 1) more time now, means less time later, 2) if your symbols are more difficult to document than necessary, you wont do it. You can duplicate the main page and work in the same file in case the file is small. I also mentioned that one of the most important things is automating the process with plugins and Figma features. You can move files between teams and sections by: 2. Branching can make file management a lot easier in the long run, and ensure that youre all working within the correct main file atalltimes. Then I started getting the infamous Figma memory alerts banner.