A well-structured layer hierarchy ensures that your design remains organized and easy to understand, even as it grows in complexity. Organize individual or groups of screenshots with the header frame (white bar). A dedicated component library helps you store, manage, and update your design elements in a centralized location. A word from the wise: Keep your status types as simple as possible. Navigation: Buttons, links, tabs, accordions, pagination, and progress indicators. Consequently, I often change elements and styles, much to the delight of the engineering team. Once youve added a cover frame, you can design it! The designer copied and pasted it from one artboard to another. You can duplicate the main page and work in the same file in case the file is small. named TWIG-812 Form fields A/B test to match the taskname. I used this simple technique I saw Jan Toman used once. If you enjoyed my article, I suggest you follow me and subscribe so youll receive an email whenever I post. A playground section where the design team can test new components. I wrote last month about organizing information inside Figma files. A border around the frame helps group the contents as you may have multiple flows or scenarios on the page. Designers using the file will replace the title Design 1 with their desired name. Create a Project for Each Client. Under the section heading are pages dedicated to the theme of exploring ideas. Go to the Figma menu > edit > Select all with > Select all with same properties > click paste to replace. Create a new file in your Figma account. They can touch screens and move or edit information. Lets say you have a team for your consumer app, a project for the Account section of your app, and a file for the Account Auth designs. To help you find them faster, you can mark these files as favorites, so they show up at the top of the tree, and youll find them easily. While we can argue until the cows come home about what the ideal system is, there are three things that everyone can agree on when it comes to organizational structures: 1. You need to go artboard by artboard and figure out the main components. Therefore, its more complex if the information on the screen and the layout do not organize well. The harder you make something, the less likely you and your team are to do it. Consistent naming helps team members quickly locate specific assets, understand their purpose, and avoid miscommunication. Enter the Figma file > click on the chevron near the name > Move to project. When exploring your ideas, label them with the exploration header (black bar). Note: I thought all of the developers I worked with had a Figma account and used the inspect mode. Before you start working on the Figma file, you can duplicate it and move the old file to the archive folder in the Figma file browser. So, I tend to overcompensate by over organizing my files then lose steam as time goes on. Identify components in the Layers panel using the purple icon. With your screen designs archived, you quickly go back and reference something without having to go through the version history. This change means they have to change every button on each artboard. The archived page is where you backup old designs/ideas in one place or use it to back up specific design pages. It just helps me to find where in the backlog it is. I recommend you use full background color because it makes it easier to read the information; you can take a look at the Figma community for inspiration. Organize files for easier navigation. The name should include the project name and Jira ticket number. If you don't have a good system for organizing your Figma files, it can quickly become a mess. Generally speaking, you should optimize your design files for speed, comprehension, and collaboration. 2. ), Designs are done and ready to be shipped: . Why? At the bottom, you have atoms or styles. For example, if you design a mobile app, you may want to use the same icon. Use these best practices as guidelines and improve your specific organization and workflow from them. Lets jazz thisthingup. In saying that, you might also have a much smaller org, so you may not need loads of different teams. In a design team, youre likely to have another designer working on the file one day. Link to a grouping of designs. When we work on a large team, we must build a clear and concise process that everyone can follow. Because you can have multiple design files in each project, this means that there's space for everyone to work in the open, and it's really easy for anyone coming in to know what to expect when looking in each project space. 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. Instead of using different files for new iterative updates, you can create these in a branch instead, which would align to the product surface approach: Since Figma is built in the browser, versions are automatically created within the version history of every file. Registration-flow-v1-final10.jpg, anyone? The way you organize your Figma needs to represent the way your design teams are organized. By reusing components and styles, you can ensure that your design elements remain cohesive and aligned with your brand guidelines. Here are some plugins to help you generate a cover for your files: Another benefit of using Figma is how big and powerful the ecosystem is. Cool, huh? For example, a project at my company would be the analytics solution, and pages within the file might be for a dashboard, and another might be for viewing large data sets via a table. For example, SC = school content, VI = view, ST=student, CO = course. From here, cascade libraries down into whatever makes sense for your org. The best approach is to use the Figma canvas to organize frames according to flow. 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. By following these guidelines, you can enhance team collaboration, save time, and ensure your projects run smoothly. So, I am in two minds about having non-status emojis. . So if you see the code ST-SC-AC-CO-VIDEO, you know the story is about a student viewing a video page inside a course from a school. By organizing your design elements within frames, you can create a clear hierarchy and make it easy to reposition or resize multiple layers at once. The page status legend frame contains emoji icons with status labels for reference. Being able to name major changes makes it easier to articulate the evolution of a design to stakeholders. colors, fonts, shadows, icons) that is detached from the component library. We'd reallyreallyrecommend upgrading to one of the paid plans. The Libraries are the master files, and the flows feed off them vampires . Browsing clients directly will make it easier to look for a project. The result will be a clear UI kit and a great starting point for building a design system with design tokens. It just helps make sure that developers, designers, BAs, and managers are all working from the right documents. I also mentioned that one of the most important things is automating the process with plugins and Figma features. While we all strive for a well-organized structure to match our pixel-perfect designs, it can be tough to figure out where to start, how to maintain your system, and what works best foryourteam. File Thumbnail Kit for Figma by Joey Banks One of the most overlooked aspects of Figma organization is the use of file covers. Plus, branching is used for a variety of reasons. You may at some point feel too constrained with this configuration. Ill be working on the assumption here that youre part of#2above. Having a precise definition on organising design screens is essential, so everyone can follow the same logic. By granting view or edit access as needed, you can ensure that only authorized users can modify your designs, preventing accidental changes and maintaining design integrity. When we work on a large team, we must build a clear and concise process that everyone can follow. Its not always the case; sometimes, were working on a chaotic file because the other designer hasnt worked in a clean environment. If youre looking to archive work within files that have a longer shelf life, check out this workflow. 3. The organization will assist UI, UX, and product designers during the design process. Cut and paste your old design items beneath a date header, and of course, change the date to the day you pasted it on the page. Let's start at the top: Next, we have the main elements that make up your design system files: Before we get into design system-specific tips, it's worth looking at the general organization of your Figma setup. Unorganized Figma files are difficult to understand. Organize your Figma files by separating different design elements, such as wireframes, mockups, and prototypes, into dedicated pages. That way, designers, developers, QA testers, and product managers can easily find what theyre looking for. Device-type emojis can be used on pages next to the state to indicate what platform you are designing for. This is the queen file and what she says goes no questions asked. This can either be as simple as a traffic light system that says whether a component is Not in code In development Live or Out of date/deprecated, or could include the version number, aligned with the versioning system you use for your documentation and code. Once the work has been signed off and coded up, youd then merge your work back into the main Account Auth file, add a named version into the version history with a date and description of the work completed, and move onto the nextfeature. Use comments and annotations to provide feedback, ask questions, or request changes directly within your design files, keeping all project-related discussions in context. 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. File organization might feel like a chore at first. In addition to that, the onboarding process for new designers will be easier too, and new hires will know better how to find information. Branching can make file management a lot easier in the long run, and ensure that youre all working within the correct main file atalltimes. You could also split the teams by platforms (Product A- iOS, Product A - Web) if it helps you. which form chaos and block them from quickly finding the info or assets they need right now. There is a couple of different emojis you can use that say similar things. *There isnt a tablet emoji (lame), so I use a phone with an arrow. But, on the other hand, they are cute, and I like them. When the team has a clear structure for the file browser, its a good idea to announce it inside the design team, so all the designers know the structure well. You can move files between teams and sections by: 2. Think About File Structure You Really Need Before we get started, let's learn about Figma's file structure. Having a project for each client allows you to easily keep . This approach helps you maintain a clean and organized workspace, making it easy for team members to navigate and locate specific assets. By regularly reviewing and documenting design iterations, you can maintain a clear record of your project's progress and easily revert to previous versions if needed. This means that if you spot an opportunity to split files into smaller, more nimble ones,goahead! Depending on which project structure you opt for, a strong naming convention could look something like this for awebproject: And heres how that may look for a software product. I was adding master symbols inside a frame. Files pair really nicely with our projects, so you can extend the naming to make them easier to find andunderstand. Similar to how we suggest breaking out work in progress, 'in development' and 'production, we suggest doing the same for your design system libraries. Its not that difficult to do. This way, you can focus on the work at hand, rather than being confused by other, older design work that doesn't require an iterative update. A flow is where your research, discovery, design, and prototypes are made. If youre a cross functional team who ships designs for iOS, Android, and web, youre probably wondering how best to manage this within your file. Then you will be able to see the difference. While its tempting (and often convenient) to include an entire product within one file, try to keep files as small and nimble as possible. In addition, it will help developers from the development team in the design-to-development handoff.Here are some of the tips I shared in the article. Ahh, our old enemythe unnamed layer. It started by explaining why you should work in a clean environment and how it can affect you and your colleagues. In the modal, only sections you have marked as favorites will appear. A tools section: a place where all the tools the designers use. Keep in mind, helping your users find the suitable component should be straightforward. The 'in development' project is where files are tidied and readied for development and to put in the design system. Here are some examples of clear and consistent naming practices in Figma: By following these naming conventions, you can create a more organized Figma file structure that is easier for everyone on the team to navigate and understand. When it comes to naming, theres nothing wrong with being descriptiveif its easier to find, its easier to design. A small but important point is that the icon should be at least 500x500px when you upload it. Wait, wait, wait. Please feel free to share it with your friends or team members, and if you have any questions, please let me know. Well, we will get to that in a bit, but before you do anything, you must understand how atomic design works. This is also an excellent way to get more visual consistency, and it's easier to read. You can supercharge this by making use of named versions to indicate any significant changes totheteam. One of the suggestions we make is to split your library files out into multiple design files. Create styles for all the typography you found. Because they have better things to do. Invest your time and energy in your work and clean and organize the file. Version numbers are also helpful on libraries as a whole if you are ahead or behind the documentation and the code. For the contents of the cover thumbnail, you should try to keep this as simple as possible. 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. That way, you can make many changes in one click. Any other way can give the impression you dont control Figma. First, hand-off tools may not like these emojis (zeroheights search function isnt a fan). After duplicating the file, eliminate any information you dont need. Please keep it simple and give permissions to a team only for people who need them. Every time I needed to add a new symbol, I would update ALL the pages numbers. You can have many errors that affect the implementation. In a nutshell, it breaks down web design into different elements. However, an interesting option would be to build your own plugins to maintain your prototypes and your system and speed up your workflow. The way you structure and present work can make or break your ability to map towards broader goals, stay on the same page, and even know where to find the latest version ofadesign. Having symbols inside frames makes it harder to find, and adds more clutter. First off, to make sure everyone is on the same page, it's worth defining how Figma is structured, what particular terms mean, and how this differs across their different plans. We recommend using the Teams to organize all their different clients. Combining and clustering typography thats the same (optional), Find all the typography in the file and replace it with the styles. 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. This larger file (or files) should live in a separate project, and you can then move smaller files into an Archive project to keep file management as clean as possible, as we covered in the projects section. With this template, the idea is that a designer will duplicate it and use it for any new features you might design for this project. Here's how to organize the information in your design files well. These will likely be your base brand styles. In this guide, you'll find a few different approaches for how to organize your teams, projects, and files withinFigma. This also allows for granular permissions across projects and teams, which is really handy when you have a big design org. A QUICK WAY TO CREATE COMPONENTS. If so, it might be the right time to consider having multiple Figma Organizations for your company. Also, from a developer's experience, it is more useful to have proper naming rather than a visual one. *Im not sure if anyone else does this, but I like to add the Jira ticket number to the component description. With your design systems team closest to your engineering team, you can align the naming conventions, status, and any other important information with the correct engineers and then add it to your Figma component description. This section will be split in two, with a Block Level Modifier approach and one aligning toHTMLmarkup. Let's see how to get you on track to organize your Figma properly, so you can focus on your work and (hopefully) leave the mess behind you once and for all. Figma Hacks: Documenting Your Design System for Smooth Implementation. So I cant stress enough how important it is to keep your filing systems as simple and easy to maintain as possible. If not, stop what you are doing and read it now. This way, you only need to set it up once, and publish it out to the wider teamforusage. An easy test is to see if someone new can figure out how to do something without you explaining it to them. Keep the same naming convention everywhere: in your Figma files, in your zeroheight, when you talk to your colleagues, etc. Page structure: Hero, filters, top nav, footer. Seriously! Component is up to date and live Component needs to be updated and has a Jira ticket*. Component isnt live yet. So just double-check with them all that they have accounts and are using inspect mode. Structure In the Assetspanel, you will have access to the following components: Local Components: Components you created in this file. Sections let you: Designate areas of the canvas for collaboration or ideation. Customize the content to fit your organizations structure. Use our Figma file template to start your documentation design file; Organizing your documentation will benefit your design system by saving you time, engaging your team to collaborate in a more organized way and bringing more consistency to your documentation. The design system part should include all the libraries that are public to the designers and also files for testing and archiving. Figma's version history feature allows you to track changes made to your files over time. What that does not solve for, however, is separating conceptual or in-process features vs final/production-ready features. Since this method requires knowledge of markup language, its best for a technical designer or the design systems team totakeiton. The Design 1 page contains the framework for organizing your design work. To learn more about organizing files and the Figma environment, check out these two articles I wrote. The details frame is where designers provide an overview of the feature on this page. Where are the emojis? Give permission only to the people that need it. Easy to navigateA filing system should work much like good product architecture. Here are some templates for your copying pleasure: I will admit that filing, organizing, and tidying up are not my skills in life (as I write this, I can see a pile of dishes that are balancing rather dangerously in the sink). One of the design managers roles is to ensure that the team works effectively. Therefore, there comes a need to name them in a way that makes sense to . Product Designer, Specializing in Complex Products and Design Systems | Figma Expert | Mentorship | Writing about Product Design: www.linkedin.com/in/edwche. If you manage your designs with project management software, you may want to follow a ticketing system with your Figma files, too. You can use the technique I show for creating typography styles. Use thumbnails to display information, status, or any other additional information useful for your team. 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. I like to link the files I am working on with epics or stories in Jira. Develop a style guide that includes typography, color schemes, and other design elements to ensure consistency across your projects. Free expertly crafted files you can duplicate, remix, and use. In this blog post, we've discussed various Figma file structure best practices that can help you create a more efficient and organized design workflow. However, to make sure that communication is clear, one suggestion is to have some form of status on your libraries and components. Then lastly you have templates that are made up of components. Click Create component in the toolbar. Choose one style and run the plugin Similayer. 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. Select the new page, apply the different filter, and then put the new design above the old one. I have broken them down in more detail below. Theyre unfamiliar with Figma, so giving them edit permission is like opening the door to problems. There is also a bunch of tips like cool plugins, there was even one that allowed to organize files by version.